refactor(ui): change Button icon prop to accept component reference instead of JSX element

src/features/admin/pages/UsersPage.client.js

@@ -80,7 +80,7 @@ const UsersPageClient = () => {
                     variant="secondary"
                     size="sm"
                     onClick={() => setEditingUserId(user.id)}
-                    icon={<PencilEdit01Icon className="w-4 h-4" />}
+                    icon={PencilEdit01Icon}
                 >
                     Modifier
                 </Button>

src/shared/components/Button.js

@@ -56,6 +56,8 @@ const Button = ({
         }
     };
 
+    const Icon = icon;
+
     return (
         <button
             type={type}
@@ -68,12 +70,12 @@ const Button = ({
                 <LoadingSpinner />
             ) : (
                 <>
-                    {icon && iconPosition === 'left' && (
-                        <span className={iconSizes[size]}>{icon}</span>
+                    {Icon && iconPosition === 'left' && (
+                        <span className={iconSizes[size]}><Icon /></span>
                     )}
                     {children}
-                    {icon && iconPosition === 'right' && (
-                        <span className={iconSizes[size]}>{icon}</span>
+                    {Icon && iconPosition === 'right' && (
+                        <span className={iconSizes[size]}><Icon /></span>
                     )}
                 </>
             )}

src/shared/components/Modal.js

@@ -92,7 +92,7 @@ const Modal = ({
                                 variant="ghost"
                                 size="sm"
                                 onClick={onClose}
-                                icon={<Cancel01Icon className="w-4 h-4" />}
+                                icon={Cancel01Icon}
                                 className="!p-1 -mr-1"
                             />
                         )}