refactor: dynamic icon button with medusajs and customize icon

src/modules/common/icons/index.ts

@@ -0,0 +1,19 @@
+export { default as Back } from "./back"
+export { default as Bancontact } from "./bancontact"
+export { default as ChevronDown } from "./chevron-down"
+export { default as Eye } from "./eye"
+export { default as EyeOff } from "./eye-off"
+export { default as FastDelivery } from "./fast-delivery"
+export { default as Ideal } from "./ideal"
+export { default as MapPin } from "./map-pin"
+export { default as Medusa } from "./medusa"
+export { default as Nextjs } from "./nextjs"
+export { default as Package } from "./package"
+export { default as PayPal } from "./paypal"
+export { default as PlaceholderImage } from "./placeholder-image"
+export { default as Refresh } from "./refresh"
+export { default as Spinner } from "./spinner"
+export { default as Trash } from "./trash"
+export { default as User } from "./user"
+export { default as X } from "./x"
+export { default as Twitter } from "./twitter"

src/modules/common/icons/twitter.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Twitter: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 15 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M12.8069 2.87388C12.8069 3.01339 12.8069 3.125 12.8069 3.26451C12.8069 7.14286 9.8772 11.5792 4.49215 11.5792C2.81805 11.5792 1.28345 11.1049 -3.52859e-05 10.2679C0.223179 10.2958 0.446393 10.3237 0.697509 10.3237C2.0647 10.3237 3.32028 9.84933 4.32474 9.06808C3.04126 9.04018 1.95309 8.20312 1.59037 7.03125C1.78568 7.05915 1.95309 7.08705 2.1484 7.08705C2.39952 7.08705 2.67854 7.03125 2.90175 6.97545C1.56246 6.69643 0.558 5.52455 0.558 4.10156V4.07366C0.948625 4.29687 1.42296 4.40848 1.89729 4.43638C1.08813 3.90625 0.585902 3.01339 0.585902 2.00893C0.585902 1.45089 0.725411 0.94866 0.976527 0.530133C2.42742 2.28795 4.60376 3.45982 7.03122 3.59933C6.97541 3.37612 6.94751 3.1529 6.94751 2.92969C6.94751 1.31138 8.25889 -6.37025e-07 9.8772 -6.37025e-07C10.7143 -6.37025e-07 11.4676 0.334821 12.0256 0.920758C12.6674 0.781249 13.3091 0.530133 13.8672 0.195312C13.6439 0.892857 13.1975 1.45089 12.5837 1.81362C13.1696 1.75781 13.7555 1.5904 14.2578 1.36719C13.8672 1.95312 13.3649 2.45536 12.8069 2.87388Z"
+        fill={color}
+      />
+    </svg>
+  )
+}
+
+export default Twitter

src/modules/layout/templates/vt-button/index.tsx

@@ -1,5 +1,6 @@
 import { Button, IconButton } from "@medusajs/ui"
-import { MagnifyingGlass, User, ShoppingBag, Heart } from "@medusajs/icons"
+import * as MedusaIcons from "@medusajs/icons"
+import * as CustomIcons from "@modules/common/icons"
 import {
   LayoutComponentDefinition,
   LayoutContext,
@@ -13,21 +14,20 @@ export default function VtButton({
   context: LayoutContext
 }) {
   const props = nodes.config || {}
-
+  const iconName = props.icon as string | undefined
-  const icons = {
+  const IconComponent = iconName
-    search: MagnifyingGlass,
+    ? (MedusaIcons as Record<string, any>)[iconName] ??
-    user: User,
+      (CustomIcons as Record<string, any>)[iconName]
-    cart: ShoppingBag,
+    : undefined
-    heart: Heart
-  }
-  const Icon = props.icon && icons[props.icon as keyof typeof icons]
   return (
     <>
       {props?.icon && (
         <IconButton className={props?.className ?? ""}>
-          <Icon />
+          {IconComponent && (
+            <IconComponent className={props?.iconClassName ?? ""} />
+          )}
           {props?.label && (
-            <span className="mr-2 text-[#11314E]">{props.label}</span>
+            <span className={props?.labelClassName ?? ""}>{props.label}</span>
           )}
         </IconButton>
       )}