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

refactor(icons): remove fontawesome EE-4459

refactor(icon) replace feather with lucide EE-4472

app/react/kubernetes/ingresses/CreateIngressView/Annotations/index.tsx

@@ -1,7 +1,8 @@
 import { ChangeEvent, ReactNode } from 'react';
+import { Trash2 } from 'lucide-react';
 
-import { Icon } from '@@/Icon';
 import { FormError } from '@@/form-components/FormError';
+import { Button } from '@@/buttons';
 
 import { Annotation } from './types';
 
@@ -69,13 +70,14 @@ export function Annotations({
             )}
           </div>
           <div className="col-sm-3 !pl-0 !m-0">
-            <button
-              className="btn btn-sm btn-dangerlight btn-only-icon !ml-0"
+            <Button
+              size="small"
+              color="dangerlight"
+              className="btn-only-icon !ml-0"
               type="button"
               onClick={() => removeAnnotation(i)}
-            >
-              <Icon icon="trash-2" size="md" feather />
-            </button>
+              icon={Trash2}
+            />
           </div>
         </div>
       ))}

app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx

@@ -1,5 +1,7 @@
 import { ChangeEvent, ReactNode } from 'react';
-import { Plus, RefreshCw, Trash2 } from 'react-feather';
+import { Info, Plus, RefreshCw, Trash2 } from 'lucide-react';
+
+import Route from '@/assets/ico/route.svg?c';
 
 import { Link } from '@@/Link';
 import { Icon } from '@@/Icon';
@@ -107,7 +109,7 @@ export function IngressForm({
 
   return (
     <Widget>
-      <WidgetTitle icon="svg-route" title="Ingress" />
+      <WidgetTitle icon={Route} title="Ingress" />
       <WidgetBody key={rule.Key + rule.Namespace}>
         <div className="row">
           <div className="form-horizontal">
@@ -199,7 +201,7 @@ export function IngressForm({
             <div className="col-sm-12 px-0 text-muted !mb-0">
               <div className="mb-2">Annotations</div>
               <p className="vertical-center text-muted small">
-                <Icon icon="info" mode="primary" feather />
+                <Icon icon={Info} mode="primary" />
                 <span>
                   You can specify{' '}
                   <a
@@ -355,7 +357,7 @@ export function IngressForm({
                     </div>
 
                     <p className="vertical-center text-muted small whitespace-nowrap col-sm-12 !p-0">
-                      <Icon icon="info" mode="primary" size="md" feather />
+                      <Icon icon={Info} mode="primary" size="md" />
                       <span>
                         Add a secret via{' '}
                         <Link
@@ -375,10 +377,10 @@ export function IngressForm({
                 )}
                 {host.NoHost && (
                   <p className="vertical-center text-muted small whitespace-nowrap col-sm-12 !p-0">
-                    <Icon icon="info" mode="primary" size="md" feather />A
-                    fallback rule has no host specified. This rule only applies
-                    when an inbound request has a hostname that does not match
-                    with any of your other rules.
+                    <Icon icon={Info} mode="primary" size="md" />A fallback rule
+                    has no host specified. This rule only applies when an
+                    inbound request has a hostname that does not match with any
+                    of your other rules.
                   </p>
                 )}
 

app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx

@@ -1,4 +1,4 @@
-import { Plus, Trash2 } from 'react-feather';
+import { Plus, Trash2 } from 'lucide-react';
 import { useRouter } from '@uirouter/react';
 import { useStore } from 'zustand';
 
@@ -6,6 +6,7 @@ import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useNamespaces } from '@/react/kubernetes/namespaces/queries';
 import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
 import { confirmDeletionAsync } from '@/portainer/services/modal.service/confirm';
+import Route from '@/assets/ico/route.svg?c';
 
 import { Datatable } from '@@/datatables';
 import { Button } from '@@/buttons';
@@ -51,7 +52,7 @@ export function IngressDatatable() {
       isLoading={ingressesQuery.isLoading}
       emptyContentLabel="No supported ingresses found"
       title="Ingresses"
-      titleIcon="svg-route"
+      titleIcon={Route}
       getRowId={(row) => row.Name + row.Type + row.Namespace}
       renderTableActions={tableActions}
       disableSelect={useCheckboxes()}

app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx

@@ -1,4 +1,5 @@
 import { CellProps, Column } from 'react-table';
+import { AlertTriangle, ArrowRight } from 'lucide-react';
 
 import { Icon } from '@@/Icon';
 import { Badge } from '@@/Badge';
@@ -34,11 +35,11 @@ export const ingressRules: Column<Ingress> = {
         <div key={`${path.Host}${path.Path}${path.ServiceName}:${path.Port}`}>
           <span className="flex px-2 flex-nowrap items-center gap-1">
             {link(path.Host, path.Path, isHttp)}
-            <Icon icon="arrow-right" feather />
+            <Icon icon={ArrowRight} />
             {`${path.ServiceName}:${path.Port}`}
             {!path.HasService && (
               <Badge type="warn" className="ml-1 gap-1">
-                <Icon icon="alert-triangle" feather />
+                <Icon icon={AlertTriangle} />
                 Service doesn&apos;t exist
               </Badge>
             )}