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

refactor(icons): remove fontawesome EE-4459

refactor(icon) replace feather with lucide EE-4472

app/react/components/BoxSelector/BoxSelector.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/react';
 import { useState } from 'react';
+import { User } from 'lucide-react';
 
 import { init as initFeatureService } from '@/react/portainer/feature-flags/feature-flags.service';
 import { Edition, FeatureId } from '@/react/portainer/feature-flags/enums';
@@ -21,14 +22,14 @@ function Example() {
   const options: BoxSelectorOption<number>[] = [
     {
       description: 'description 1',
-      icon: 'fa fa-rocket',
+      icon: User,
       id: '1',
       value: 3,
       label: 'option 1',
     },
     {
       description: 'description 2',
-      icon: 'fa fa-rocket',
+      icon: User,
       id: '2',
       value: 4,
       label: 'option 2',
@@ -53,14 +54,14 @@ function LimitedFeature() {
   const options: BoxSelectorOption<number>[] = [
     {
       description: 'description 1',
-      icon: 'fa fa-rocket',
+      icon: User,
       id: '1',
       value: 3,
       label: 'option 1',
     },
     {
       description: 'description 2',
-      icon: 'fa fa-rocket',
+      icon: User,
       id: '2',
       value: 4,
       label: 'option 2',

app/react/components/BoxSelector/BoxSelector.test.tsx

@@ -1,3 +1,5 @@
+import { Rocket } from 'lucide-react';
+
 import { render, fireEvent } from '@/react-tools/test-utils';
 
 import { BoxSelector, Props } from './BoxSelector';
@@ -23,14 +25,14 @@ test('should render with the initial value selected and call onChange when click
   const options: BoxSelectorOption<number>[] = [
     {
       description: 'description 1',
-      icon: 'fa fa-rocket',
+      icon: Rocket,
       id: '1',
       value: 3,
       label: 'option 1',
     },
     {
       description: 'description 2',
-      icon: 'fa fa-rocket',
+      icon: Rocket,
       id: '2',
       value: 4,
       label: 'option 2',

app/react/components/BoxSelector/BoxSelectorItem.css

@@ -13,11 +13,6 @@
   color: var(--text-boxselector-header);
 }
 
-.boxselector_header .fa,
-.fab {
-  font-weight: normal;
-}
-
 .boxselector_wrapper input[type='radio'],
 .box-selector-item input[type='radio'] {
   display: none;

app/react/components/BoxSelector/BoxSelectorItem.stories.tsx

@@ -1,8 +1,11 @@
 import { Meta } from '@storybook/react';
+import { User } from 'lucide-react';
 
 import { init as initFeatureService } from '@/react/portainer/feature-flags/feature-flags.service';
 import { Edition, FeatureId } from '@/react/portainer/feature-flags/enums';
 
+import { IconProps } from '@@/Icon';
+
 import { BoxSelectorItem } from './BoxSelectorItem';
 import { BoxSelectorOption } from './types';
 
@@ -11,7 +14,7 @@ const meta: Meta = {
   args: {
     selected: false,
     description: 'description',
-    icon: 'fa-rocket',
+    icon: User,
     label: 'label',
   },
 };
@@ -21,7 +24,7 @@ export default meta;
 interface ExampleProps {
   selected?: boolean;
   description?: string;
-  icon?: string;
+  icon?: IconProps['icon'];
   label?: string;
   feature?: FeatureId;
 }
@@ -35,7 +38,7 @@ function Template({
 }: ExampleProps) {
   const option: BoxSelectorOption<number> = {
     description,
-    icon: `fa ${icon}`,
+    icon,
     id: 'id',
     label,
     value: 1,

app/react/components/BoxSelector/BoxSelectorItem.tsx

@@ -54,7 +54,6 @@ export function BoxSelectorItem<T extends number | string>({
             {!!option.icon && (
               <Icon
                 icon={option.icon}
-                feather={option.featherIcon}
                 className="boxselector_icon !flex items-center"
               />
             )}

app/react/components/BoxSelector/LimitedToBeIndicator.tsx

@@ -1,5 +1,5 @@
 import ReactTooltip from 'react-tooltip';
-import { HelpCircle } from 'react-feather';
+import { HelpCircle } from 'lucide-react';
 
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
 
@@ -21,7 +21,7 @@ export function LimitedToBeIndicator({ tooltipId, featureId }: Props) {
             <span className="text-warning-9">Pro Feature</span>
           </a>
           <HelpCircle
-            className="feather !text-warning-7"
+            className="lucide !text-warning-7"
             data-tip
             data-for={tooltipId}
             tooltip-append-to-body="true"

app/react/components/BoxSelector/LogoIcon.tsx

@@ -2,15 +2,15 @@ import { Icon, IconProps } from '@@/Icon';
 
 type Props = IconProps;
 
-export function LogoIcon({ icon, featherIcon }: Props) {
+export function LogoIcon({ icon }: Props) {
   return (
     <div
       className={`
    text-6xl h-14 w-14
-   inline-flex items-center justify-center 
+   inline-flex items-center justify-center
 `}
     >
-      <Icon icon={icon} feather={featherIcon} className="feather !flex" />
+      <Icon icon={icon} className="!flex" />
     </div>
   );
 }

app/react/components/BoxSelector/common-options/build-methods.tsx

@@ -1,4 +1,4 @@
-import { Edit, FileText, Globe, Upload } from 'react-feather';
+import { Edit, FileText, Globe, Upload } from 'lucide-react';
 
 import GitIcon from '@/assets/ico/git.svg?c';