refactor: use Icon instead of deprecated Octicon component (#1747)

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/buttons/PillButton.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 
 import type { Icon } from '@primer/octicons-react';
-import { Octicon, Stack, Text } from '@primer/react';
+import { Stack, Text } from '@primer/react';
 
 import { type IconColor, Size } from '../../types';
 
@@ -21,7 +21,7 @@ export const PillButton: FC<IPillButton> = (props: IPillButton) => {
       className="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
     >
       <Stack direction="horizontal" align="center" gap="condensed">
-        <Octicon icon={props.icon} size={Size.XSMALL} className={props.color} />
+        <props.icon size={Size.XSMALL} className={props.color} />
         {props.metric && <Text>{props.metric}</Text>}
       </Stack>
     </button>

src/renderer/components/buttons/__snapshots__/PillButton.test.tsx.snap

@@ -7,7 +7,7 @@ import {
 } from 'react';
 
 import { BellSlashIcon, CheckIcon, ReadIcon } from '@primer/octicons-react';
-import { IconButton, Octicon, Tooltip } from '@primer/react';
+import { IconButton, Tooltip } from '@primer/react';
 
 import { AppContext } from '../../context/App';
 import { Opacity, Size } from '../../types';
@@ -96,11 +96,7 @@ export const NotificationRow: FC<INotificationRow> = ({
     >
       <div className="mr-3 flex items-center justify-center">
         <Tooltip text={notificationType} direction="e">
-          <Octicon
-            icon={NotificationIcon}
-            size={Size.LARGE}
-            className={iconColor}
-          />
+          <NotificationIcon size={Size.LARGE} className={iconColor} />
         </Tooltip>
       </div>