feat(ui): use phosphor icons

There were some scattered places where we used other icon packs. Changed all to use phosphor icons for consistency.

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx

@@ -25,14 +25,14 @@ import { CanvasSettingsShowHUDSwitch } from 'features/controlLayers/components/S
 import { CanvasSettingsShowProgressOnCanvas } from 'features/controlLayers/components/Settings/CanvasSettingsShowProgressOnCanvasSwitch';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RiSettings4Fill } from 'react-icons/ri';
+import { PiGearSixFill } from 'react-icons/pi';
 
 export const CanvasSettingsPopover = memo(() => {
   const { t } = useTranslation();
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <IconButton aria-label={t('common.settingsLabel')} icon={<RiSettings4Fill />} variant="ghost" />
+        <IconButton aria-label={t('common.settingsLabel')} icon={<PiGearSixFill />} variant="ghost" />
       </PopoverTrigger>
       <PopoverContent>
         <PopoverArrow />

invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx

@@ -8,7 +8,7 @@ import {
 } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BsBracesAsterisk } from 'react-icons/bs';
+import { PiBracketsCurlyBold } from 'react-icons/pi';
 
 const loadingStyles: SystemStyleObject = {
   svg: { animation: spinAnimation },
@@ -27,7 +27,7 @@ export const ShowDynamicPromptsPreviewButton = memo(() => {
         variant="promptOverlay"
         isDisabled={isOpen}
         aria-label={t('dynamicPrompts.showDynamicPrompts')}
-        icon={<BsBracesAsterisk />}
+        icon={<PiBracketsCurlyBold />}
         onClick={onOpen}
         sx={isLoading ? loadingStyles : undefined}
         colorScheme={isError && !isLoading ? 'error' : 'base'}

invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover/GallerySettingsPopover.tsx

@@ -9,7 +9,7 @@ import ShowStarredFirstCheckbox from 'features/gallery/components/GallerySetting
 import SortDirectionCombobox from 'features/gallery/components/GallerySettingsPopover/SortDirectionCombobox';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RiSettings4Fill } from 'react-icons/ri';
+import { PiGearSixFill } from 'react-icons/pi';
 
 const GallerySettingsPopover = () => {
   const { t } = useTranslation();
@@ -22,7 +22,7 @@ const GallerySettingsPopover = () => {
           variant="link"
           alignSelf="stretch"
           aria-label={t('gallery.gallerySettings')}
-          icon={<RiSettings4Fill />}
+          icon={<PiGearSixFill />}
         />
       </PopoverTrigger>
       <PopoverContent>

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEditButton.tsx

@@ -3,7 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { setSelectedModelMode } from 'features/modelManagerV2/store/modelManagerV2Slice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoPencil } from 'react-icons/io5';
+import { PiPencilBold } from 'react-icons/pi';
 
 export const ModelEditButton = memo(() => {
   const { t } = useTranslation();
@@ -14,7 +14,7 @@ export const ModelEditButton = memo(() => {
   }, [dispatch]);
 
   return (
-    <Button size="sm" leftIcon={<IoPencil />} colorScheme="invokeYellow" onClick={handleEditModel} flexShrink={0}>
+    <Button size="sm" leftIcon={<PiPencilBold />} colorScheme="invokeYellow" onClick={handleEditModel} flexShrink={0}>
       {t('modelManager.edit')}
     </Button>
   );

invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx

@@ -10,7 +10,7 @@ import { LoadWorkflowFromGraphModal } from 'features/workflowLibrary/components/
 import { SaveWorkflowAsDialog } from 'features/workflowLibrary/components/SaveWorkflowAsDialog/SaveWorkflowAsDialog';
 import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MdDeviceHub } from 'react-icons/md';
+import { PiFlowArrowBold } from 'react-icons/pi';
 import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
 
 import { Flow } from './flow/Flow';
@@ -47,7 +47,7 @@ const NodeEditor = () => {
         </>
       )}
       <WorkflowEditorSettings />
-      {isLoading && <IAINoContentFallback label={t('nodes.loadingNodes')} icon={MdDeviceHub} />}
+      {isLoading && <IAINoContentFallback label={t('nodes.loadingNodes')} icon={PiFlowArrowBold} />}
     </Flex>
   );
 };

invokeai/frontend/web/src/features/parameters/components/Bbox/BboxSetOptimalSizeButton.tsx

@@ -6,7 +6,7 @@ import { selectCanvasSlice, selectOptimalDimension } from 'features/controlLayer
 import { getIsSizeTooLarge, getIsSizeTooSmall } from 'features/parameters/util/optimalDimension';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RiSparklingFill } from 'react-icons/ri';
+import { PiSparkleFill } from 'react-icons/pi';
 
 const selectWidth = createSelector(selectCanvasSlice, (canvas) => canvas.bbox.rect.width);
 const selectHeight = createSelector(selectCanvasSlice, (canvas) => canvas.bbox.rect.height);
@@ -45,7 +45,7 @@ export const BboxSetOptimalSizeButton = memo(() => {
       onClick={onClick}
       variant="ghost"
       size="sm"
-      icon={<RiSparklingFill />}
+      icon={<PiSparkleFill />}
       colorScheme={isSizeTooSmall || isSizeTooLarge ? 'warning' : 'base'}
     />
   );

invokeai/frontend/web/src/features/parameters/components/MainModel/NavigateToModelManagerButton.tsx

@@ -5,7 +5,7 @@ import { selectIsModelsTabDisabled } from 'features/system/store/configSlice';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiGearSixBold } from 'react-icons/pi';
+import { PiGearSixFill } from 'react-icons/pi';
 
 export const NavigateToModelManagerButton = memo((props: Omit<IconButtonProps, 'aria-label'>) => {
   const { t } = useTranslation();
@@ -22,7 +22,7 @@ export const NavigateToModelManagerButton = memo((props: Omit<IconButtonProps, '
 
   return (
     <IconButton
-      icon={<PiGearSixBold />}
+      icon={<PiGearSixFill />}
       tooltip={`${t('common.goTo')} ${t('ui.tabs.modelsTab')}`}
       aria-label={`${t('common.goTo')} ${t('ui.tabs.modelsTab')}`}
       onClick={handleClick}

invokeai/frontend/web/src/features/parameters/components/MainModel/UseDefaultSettingsButton.tsx

@@ -4,7 +4,7 @@ import { selectModel } from 'features/controlLayers/store/paramsSlice';
 import { setDefaultSettings } from 'features/parameters/store/actions';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RiSparklingFill } from 'react-icons/ri';
+import { PiSparkleFill } from 'react-icons/pi';
 
 export const UseDefaultSettingsButton = () => {
   const model = useAppSelector(selectModel);
@@ -17,7 +17,7 @@ export const UseDefaultSettingsButton = () => {
 
   return (
     <IconButton
-      icon={<RiSparklingFill />}
+      icon={<PiSparkleFill />}
       tooltip={t('modelManager.useDefaultSettings')}
       aria-label={t('modelManager.useDefaultSettings')}
       isDisabled={!model}

invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx

@@ -4,7 +4,7 @@ import { selectDynamicPromptsIsLoading } from 'features/dynamicPrompts/store/dyn
 import { QueueIterationsNumberInput } from 'features/queue/components/QueueIterationsNumberInput';
 import { useQueueBack } from 'features/queue/hooks/useQueueBack';
 import { memo } from 'react';
-import { RiSparkling2Fill } from 'react-icons/ri';
+import { PiSparkleFill } from 'react-icons/pi';
 
 import { QueueButtonTooltip } from './QueueButtonTooltip';
 
@@ -23,7 +23,7 @@ export const InvokeQueueBackButton = memo(() => {
           isLoading={isLoading || isLoadingDynamicPrompts}
           loadingText={invoke}
           isDisabled={isDisabled}
-          rightIcon={<RiSparkling2Fill />}
+          rightIcon={<PiSparkleFill />}
           variant="solid"
           colorScheme="invokeYellow"
           size="lg"

invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx

@@ -1,7 +1,7 @@
 import { usePruneQueue } from 'features/queue/hooks/usePruneQueue';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RiSparklingFill } from 'react-icons/ri';
+import { PiBroomBold } from 'react-icons/pi';
 
 import QueueButton from './common/QueueButton';
 
@@ -20,7 +20,7 @@ const PruneQueueButton = ({ asIconButton }: Props) => {
       asIconButton={asIconButton}
       label={t('queue.prune')}
       tooltip={t('queue.pruneTooltip', { item_count: finishedCount })}
-      icon={<RiSparklingFill />}
+      icon={<PiBroomBold />}
       onClick={pruneQueue}
       colorScheme="invokeBlue"
     />

invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx

@@ -2,7 +2,7 @@ import { IconButton } from '@invoke-ai/ui-library';
 import { useQueueFront } from 'features/queue/hooks/useQueueFront';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AiFillThunderbolt } from 'react-icons/ai';
+import { PiLightningFill } from 'react-icons/pi';
 
 import { QueueButtonTooltip } from './QueueButtonTooltip';
 
@@ -16,7 +16,7 @@ const QueueFrontButton = () => {
         isDisabled={isDisabled}
         isLoading={isLoading}
         onClick={queueFront}
-        icon={<AiFillThunderbolt />}
+        icon={<PiLightningFill />}
         size="lg"
       />
     </QueueButtonTooltip>

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx

@@ -17,13 +17,14 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   PiBugBeetleBold,
+  PiGearSixFill,
   PiInfoBold,
   PiKeyboardBold,
   PiShareNetworkFill,
   PiToggleRightFill,
   PiUsersBold,
 } from 'react-icons/pi';
-import { RiDiscordFill, RiGithubFill, RiSettings4Line } from 'react-icons/ri';
+import { RiDiscordFill, RiGithubFill } from 'react-icons/ri';
 
 import { useSettingsModal } from './SettingsModal';
 import { SettingsUpsellMenuItem } from './SettingsUpsellMenuItem';
@@ -43,7 +44,7 @@ const SettingsMenu = () => {
         as={IconButton}
         variant="link"
         aria-label={t('accessibility.menu')}
-        icon={<RiSettings4Line fontSize={20} />}
+        icon={<PiGearSixFill fontSize={20} />}
         boxSize={8}
       />
       <Portal>

invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx

@@ -7,8 +7,7 @@ import { useQueueBack } from 'features/queue/hooks/useQueueBack';
 import type { UsePanelReturn } from 'features/ui/hooks/usePanel';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiCircleNotchBold, PiSlidersHorizontalBold, PiTrashSimpleBold } from 'react-icons/pi';
-import { RiSparklingFill } from 'react-icons/ri';
+import { PiCircleNotchBold, PiSlidersHorizontalBold, PiSparkleFill, PiTrashSimpleBold } from 'react-icons/pi';
 import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 
 const floatingButtonStyles: SystemStyleObject = {
@@ -31,7 +30,7 @@ const FloatingSidePanelButtons = (props: Props) => {
     if (!isDisabled && isProcessing) {
       return <Icon boxSize={6} as={PiCircleNotchBold} animation={spinAnimation} />;
     }
-    return <RiSparklingFill size="16px" />;
+    return <PiSparkleFill size="16px" />;
   }, [isDisabled, queueStatus]);
 
   if (!props.panelApi.isCollapsed) {

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx

@@ -2,14 +2,14 @@ import { MenuItem } from '@invoke-ai/ui-library';
 import { useWorkflowEditorSettingsModal } from 'features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RiSettings4Line } from 'react-icons/ri';
+import { PiGearSixFill } from 'react-icons/pi';
 
 const DownloadWorkflowMenuItem = () => {
   const { t } = useTranslation();
   const modal = useWorkflowEditorSettingsModal();
 
   return (
-    <MenuItem as="button" icon={<RiSettings4Line />} onClick={modal.setTrue}>
+    <MenuItem as="button" icon={<PiGearSixFill />} onClick={modal.setTrue}>
       {t('nodes.workflowSettings')}
     </MenuItem>
   );