refactor(icons): replace fa icons [EE-4459] (#7907)

refactor(icons): remove fontawesome EE-4459

refactor(icon) replace feather with lucide EE-4472

app/react/sidebar/AzureSidebar/AzureSidebar.tsx

@@ -1,4 +1,4 @@
-import { Box } from 'react-feather';
+import { Box } from 'lucide-react';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 

app/react/sidebar/DockerSidebar.tsx

@@ -9,7 +9,7 @@ import {
   Trello,
   Clipboard,
   Edit,
-} from 'react-feather';
+} from 'lucide-react';
 
 import {
   type Environment,

app/react/sidebar/EdgeComputeSidebar.tsx

@@ -1,4 +1,4 @@
-import { Box, Clock, Grid, Layers } from 'react-feather';
+import { Box, Clock, LayoutGrid, Layers } from 'lucide-react';
 
 import { SidebarItem } from './SidebarItem';
 import { SidebarSection } from './SidebarSection';
@@ -15,7 +15,7 @@ export function EdgeComputeSidebar() {
       <SidebarItem
         to="edge.groups"
         label="Edge Groups"
-        icon={Grid}
+        icon={LayoutGrid}
         data-cy="portainerSidebar-edgeGroups"
       />
       <SidebarItem

app/react/sidebar/EnvironmentSidebar.tsx

@@ -1,6 +1,6 @@
 import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
 import { useEffect } from 'react';
-import { X, Slash } from 'react-feather';
+import { X, Slash } from 'lucide-react';
 import clsx from 'clsx';
 import angular from 'angular';
 
@@ -15,6 +15,8 @@ import { useLocalStorage } from '@/react/hooks/useLocalStorage';
 import { EndpointProviderInterface } from '@/portainer/services/endpointProvider';
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 
+import { Icon } from '@@/Icon';
+
 import { getPlatformIcon } from '../portainer/environments/utils/get-platform-icon';
 
 import styles from './EnvironmentSidebar.module.css';
@@ -44,7 +46,7 @@ export function EnvironmentSidebar() {
         <SidebarSectionTitle>
           <div className="flex items-center gap-1">
             <span>Environment:</span>
-            <Slash size="1em" className="text-xl text-gray-6" />
+            <Icon icon={Slash} className="text-xl !text-gray-6" />
             <span className="text-gray-6 text-sm">None selected</span>
           </div>
         </SidebarSectionTitle>

app/react/sidebar/Footer/BuildInfoModal.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Database, Hash, Server, Tag, Tool } from 'react-feather';
+import { Database, Hash, Server, Tag, Wrench } from 'lucide-react';
 import { DialogOverlay } from '@reach/dialog';
 
 import {
@@ -96,7 +96,7 @@ function BuildInfoModal({ closeModal }: { closeModal: () => void }) {
             </div>
             <div className={styles.toolsList}>
               <span className="inline-flex items-center">
-                <Tool size="13" className="space-right" />
+                <Wrench size="13" className="space-right" />
                 Compilation tools:
               </span>
 

app/react/sidebar/Footer/UpdateNotifications.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from 'react-query';
 import clsx from 'clsx';
+import { DownloadCloud } from 'lucide-react';
 
 import { getVersionStatus } from '@/portainer/services/api/status.service';
 import { useUIState } from '@/react/hooks/useUIState';
@@ -36,7 +37,7 @@ export function UpdateNotification() {
       )}
     >
       <div className={clsx(styles.dismissTitle, 'vertical-center')}>
-        <Icon icon="download-cloud" mode="primary" feather size="md" />
+        <Icon icon={DownloadCloud} mode="primary" size="md" />
         <span className="space-left">
           New version available {LatestVersion}
         </span>

app/react/sidebar/Header.tsx

@@ -1,4 +1,4 @@
-import { ChevronsLeft, ChevronsRight } from 'react-feather';
+import { ChevronsLeft, ChevronsRight } from 'lucide-react';
 import clsx from 'clsx';
 
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';

app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShell.tsx

@@ -2,6 +2,7 @@ import { Terminal } from 'xterm';
 import { fit } from 'xterm/lib/addons/fit/fit';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
+import { RotateCw, X, Terminal as TerminalIcon } from 'lucide-react';
 
 import { baseHref } from '@/portainer/helpers/pathHelper';
 import {
@@ -127,7 +128,7 @@ export function KubeCtlShell({ environmentId, onClose }: Props) {
     <div className={clsx(styles.root, { [styles.minimized]: shell.minimized })}>
       <div className={styles.header}>
         <div className={clsx(styles.title, 'vertical-center')}>
-          <Icon icon="terminal" feather />
+          <Icon icon={TerminalIcon} />
           kubectl shell
         </div>
         <div className={clsx(styles.actions, 'space-x-8')}>
@@ -136,7 +137,7 @@ export function KubeCtlShell({ environmentId, onClose }: Props) {
             onClick={clearScreen}
             data-cy="k8sShell-refreshButton"
           >
-            <Icon icon="rotate-cw" feather size="md" />
+            <Icon icon={RotateCw} size="md" />
           </Button>
           <Button
             color="link"
@@ -145,7 +146,6 @@ export function KubeCtlShell({ environmentId, onClose }: Props) {
           >
             <Icon
               icon={shell.minimized ? 'maximize-2' : 'minimize-2'}
-              feather
               size="md"
               data-cy={
                 shell.minimized ? 'k8sShell-restore' : 'k8sShell-minimise'
@@ -157,7 +157,7 @@ export function KubeCtlShell({ environmentId, onClose }: Props) {
             onClick={handleClose}
             data-cy="k8sShell-closeButton"
           >
-            <Icon icon="x" feather size="md" />
+            <Icon icon={X} size="md" />
           </Button>
         </div>
       </div>

app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShellButton.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
+import { Terminal } from 'lucide-react';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { useAnalytics } from '@/angulartics.matomo/analytics-services';
@@ -27,8 +28,8 @@ export function KubectlShellButton({ environmentId }: Props) {
         onClick={() => handleOpen()}
         className={clsx(styles.root, '!flex')}
       >
-        <Icon icon="terminal" feather className="vertical-center" size="md" />{' '}
-        kubectl shell
+        <Icon icon={Terminal} className="vertical-center" size="md" /> kubectl
+        shell
       </Button>
 
       {open &&

app/react/sidebar/KubernetesSidebar/KubernetesSidebar.tsx

@@ -1,4 +1,4 @@
-import { Box, Edit, Layers, Lock, Server } from 'react-feather';
+import { Box, Edit, Layers, Lock, Server } from 'lucide-react';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { Authorized } from '@/react/hooks/useUser';

app/react/sidebar/NomadSidebar/NomadSidebar.tsx

@@ -1,4 +1,4 @@
-import { Clock } from 'react-feather';
+import { Clock } from 'lucide-react';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 

app/react/sidebar/SettingsSidebar.tsx

@@ -6,7 +6,7 @@ import {
   Radio,
   FileText,
   Bell,
-} from 'react-feather';
+} from 'lucide-react';
 
 import { usePublicSettings } from '@/react/portainer/settings/queries';
 import {

app/react/sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Home } from 'react-feather';
+import { Home } from 'lucide-react';
 
 import { useUser } from '@/react/hooks/useUser';
 import { useIsTeamLeader } from '@/portainer/users/queries';

app/react/sidebar/SidebarItem/Head.tsx

@@ -57,9 +57,7 @@ export function Head({
       data-tip={label}
       data-cy={dataCy}
     >
-      {!!icon && (
-        <Icon icon={icon} feather className={clsx('flex [&>svg]:w-4')} />
-      )}
+      {!!icon && <Icon icon={icon} className={clsx('flex [&>svg]:w-4')} />}
       {isOpen && <span>{label}</span>}
 
       <ReactTooltip

app/react/sidebar/SidebarItem/Menu.tsx

@@ -6,7 +6,7 @@ import {
   useMemo,
   useReducer,
 } from 'react';
-import { ChevronDown, ChevronUp } from 'react-feather';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 
 import { useSidebarState } from '../useSidebarState';
 

app/react/sidebar/SidebarItem/SidebarItem.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-import { Clock, Icon } from 'react-feather';
+import { Clock, Icon } from 'lucide-react';
 
 import { SidebarItem } from '.';
 

app/react/sidebar/SidebarItem/SidebarItem.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Icon } from 'react-feather';
+import { Icon } from 'lucide-react';
 
 import { AutomationTestingProps } from '@/types';
 

app/react/sidebar/UpgradeBEBanner.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight } from 'react-feather';
+import { ArrowRight } from 'lucide-react';
 
 import { useAnalytics } from '@/angulartics.matomo/analytics-services';
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
@@ -50,7 +50,7 @@ function Inner() {
       onClick={handleClick}
     >
       {isOpen && <>Upgrade to Business Edition</>}
-      <ArrowRight className="text-lg feather" />
+      <ArrowRight className="text-lg lucide" />
     </button>
   );
 

app/react/sidebar/items/DashboardLink.tsx

@@ -1,4 +1,4 @@
-import { Layout } from 'react-feather';
+import { Layout } from 'lucide-react';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { AutomationTestingProps } from '@/types';

app/react/sidebar/items/VolumesLink.tsx

@@ -1,4 +1,4 @@
-import { Database } from 'react-feather';
+import { Database } from 'lucide-react';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { AutomationTestingProps } from '@/types';