From c0b492b394731d31e1a1981152a70dec15c17bdb Mon Sep 17 00:00:00 2001
From: Nam Doan <namds2920@gmail.com>
Date: Mon, 1 Dec 2025 16:34:06 +0700
Subject: [PATCH] refactor: dynamic icon button with medusajs and customize
 icon

---
 src/modules/common/icons/index.ts             | 19 +++++++++++++
 src/modules/common/icons/twitter.tsx          | 27 +++++++++++++++++++
 .../layout/templates/vt-button/index.tsx      | 22 +++++++--------
 3 files changed, 57 insertions(+), 11 deletions(-)
 create mode 100644 src/modules/common/icons/index.ts
 create mode 100644 src/modules/common/icons/twitter.tsx

diff --git a/src/modules/common/icons/index.ts b/src/modules/common/icons/index.ts
new file mode 100644
index 0000000..580d7f0
--- /dev/null
+++ b/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"
\ No newline at end of file
diff --git a/src/modules/common/icons/twitter.tsx b/src/modules/common/icons/twitter.tsx
new file mode 100644
index 0000000..94340c5
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/modules/layout/templates/vt-button/index.tsx b/src/modules/layout/templates/vt-button/index.tsx
index 7494f8f..e3602d8 100644
--- a/src/modules/layout/templates/vt-button/index.tsx
+++ b/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 icons = {
-    search: MagnifyingGlass,
-    user: User,
-    cart: ShoppingBag,
-    heart: Heart
-  }
-  const Icon = props.icon && icons[props.icon as keyof typeof icons]
+  const iconName = props.icon as string | undefined
+  const IconComponent = iconName
+    ? (MedusaIcons as Record<string, any>)[iconName] ??
+      (CustomIcons as Record<string, any>)[iconName]
+    : undefined
   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>
       )}