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/form-components/FileUpload/FileUploadField.tsx

@@ -1,4 +1,5 @@
 import { ChangeEvent, createRef } from 'react';
+import { XCircle } from 'lucide-react';
 
 import { Button } from '@@/buttons';
 import { Icon } from '@@/Icon';
@@ -46,7 +47,7 @@ export function FileUploadField({
       </Button>
 
       <span className="vertical-center">
-        {value ? value.name : <Icon icon="x-circle" feather mode="danger" />}
+        {value ? value.name : <Icon icon={XCircle} mode="danger" />}
       </span>
     </div>
   );

app/react/components/form-components/FormControl/FormControl.tsx

@@ -11,11 +11,11 @@ export type Size = 'xsmall' | 'small' | 'medium' | 'large';
 
 export interface Props {
   inputId?: string;
-  label: string | ReactNode;
+  label: ReactNode;
   size?: Size;
   tooltip?: string;
   children: ReactNode;
-  errors?: string | ReactNode;
+  errors?: ReactNode;
   required?: boolean;
 }
 

app/react/components/form-components/FormError.tsx

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import clsx from 'clsx';
+import { AlertTriangle } from 'lucide-react';
 
 import { Icon } from '@@/Icon';
 
@@ -10,7 +11,7 @@ interface Props {
 export function FormError({ children, className }: PropsWithChildren<Props>) {
   return (
     <p className={clsx(`text-muted small vertical-center`, className)}>
-      <Icon icon="alert-triangle" className="icon-warning" feather />
+      <Icon icon={AlertTriangle} className="icon-warning" />
       <span className="text-warning">{children}</span>
     </p>
   );

app/react/components/form-components/FormSection/FormSection.tsx

@@ -1,4 +1,5 @@
 import { PropsWithChildren, useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
 
 import { Icon } from '@@/Icon';
 
@@ -27,9 +28,8 @@ export function FormSection({
             className="border-0 mx-2 !ml-0 bg-transparent inline-flex justify-center items-center w-2"
           >
             <Icon
-              icon={isExpanded ? 'chevron-down' : 'chevron-right'}
+              icon={isExpanded ? ChevronDown : ChevronRight}
               className="shrink-0"
-              feather
             />
           </button>
         )}

app/react/components/form-components/InputList/InputList.tsx

@@ -1,9 +1,9 @@
 import { ComponentType } from 'react';
 import clsx from 'clsx';
 import { FormikErrors } from 'formik';
+import { ArrowDown, ArrowUp, Trash2 } from 'lucide-react';
 
 import { AddButton, Button } from '@@/buttons';
-import { Icon } from '@@/Icon';
 import { Tooltip } from '@@/Tip/Tooltip';
 import { TextTip } from '@@/Tip/TextTip';
 
@@ -136,18 +136,16 @@ export function InputList<T = DefaultType>({
                       disabled={disabled || index === 0}
                       onClick={() => handleMoveUp(index)}
                       className="vertical-center btn-only-icon"
-                    >
-                      <Icon icon="arrow-up" feather />
-                    </Button>
+                      icon={ArrowUp}
+                    />
                     <Button
                       size="medium"
                       type="button"
                       disabled={disabled || index === value.length - 1}
                       onClick={() => handleMoveDown(index)}
                       className="vertical-center btn-only-icon"
-                    >
-                      <Icon icon="arrow-down" feather />
-                    </Button>
+                      icon={ArrowDown}
+                    />
                   </>
                 )}
                 {!readOnly && (
@@ -156,9 +154,8 @@ export function InputList<T = DefaultType>({
                     size="medium"
                     onClick={() => handleRemoveItem(key, item)}
                     className="vertical-center btn-only-icon"
-                  >
-                    <Icon icon="trash-2" feather size="md" />
-                  </Button>
+                    icon={Trash2}
+                  />
                 )}
               </div>
             </div>

app/react/components/form-components/ReactSelect.css

@@ -32,6 +32,10 @@
   padding: 0 8px;
 }
 
+.portainer-selector-root .portainer-selector__clear-indicator {
+  padding: 6px;
+}
+
 .portainer-selector-root .portainer-selector__multi-value__label {
   @apply text-black;
   @apply th-dark:text-white;