From f2825ff4893f3c60fc5c225c92b3f623b024844b Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sun, 8 Jun 2025 20:33:57 +0000
Subject: [PATCH] feature: menu components class property for lucide icons

---
 resources/js/components/primevue/menu/Breadcrumb.vue  | 10 ++++------
 resources/js/components/primevue/menu/ContextMenu.vue | 10 ++++------
 resources/js/components/primevue/menu/Menu.vue        | 10 ++++------
 resources/js/components/primevue/menu/Menubar.vue     | 10 ++++------
 resources/js/components/primevue/menu/PanelMenu.vue   |  4 ++--
 resources/js/components/primevue/menu/TabMenu.vue     |  1 +
 resources/js/components/primevue/menu/TieredMenu.vue  | 10 ++++------
 resources/js/types/index.d.ts                         |  1 +
 8 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/resources/js/components/primevue/menu/Breadcrumb.vue b/resources/js/components/primevue/menu/Breadcrumb.vue
index 8559d9a7..7d53bcd0 100644
--- a/resources/js/components/primevue/menu/Breadcrumb.vue
+++ b/resources/js/components/primevue/menu/Breadcrumb.vue
@@ -36,13 +36,12 @@ defineExpose({ el: childRef });
             >
                 <i
                     v-if="item.icon"
-                    :class="item.icon"
-                    class="p-breadcrumb-item-icon"
+                    :class="['p-breadcrumb-item-icon', item.icon]"
                 />
                 <component
                     :is="item.lucideIcon"
                     v-else-if="item.lucideIcon"
-                    class="p-breadcrumb-item-icon"
+                    :class="['p-breadcrumb-item-icon', item.lucideIconClass]"
                 />
                 <span class="p-breadcrumb-item-label">{{ item.label }}</span>
             </InertiaLink>
@@ -57,13 +56,12 @@ defineExpose({ el: childRef });
             >
                 <i
                     v-if="item.icon"
-                    :class="item.icon"
-                    class="p-breadcrumb-item-icon"
+                    :class="['p-breadcrumb-item-icon', item.icon]"
                 />
                 <component
                     :is="item.lucideIcon"
                     v-else-if="item.lucideIcon"
-                    class="p-breadcrumb-item-icon"
+                    :class="['p-breadcrumb-item-icon', item.lucideIconClass]"
                 />
                 <span class="p-breadcrumb-item-label">{{ item.label }}</span>
             </a>
diff --git a/resources/js/components/primevue/menu/ContextMenu.vue b/resources/js/components/primevue/menu/ContextMenu.vue
index c6460475..1078fb5e 100644
--- a/resources/js/components/primevue/menu/ContextMenu.vue
+++ b/resources/js/components/primevue/menu/ContextMenu.vue
@@ -36,13 +36,12 @@ defineExpose({
             >
                 <i
                     v-if="item.icon"
-                    :class="item.icon"
-                    class="p-contextmenu-item-icon"
+                    :class="['p-contextmenu-item-icon', item.icon]"
                 />
                 <component
                     :is="item.lucideIcon"
                     v-else-if="item.lucideIcon"
-                    class="p-contextmenu-item-icon"
+                    :class="['p-contextmenu-item-icon', item.lucideIconClass]"
                 />
                 <span class="p-contextmenu-item-label">{{ item.label }}</span>
             </InertiaLink>
@@ -57,13 +56,12 @@ defineExpose({
             >
                 <i
                     v-if="item.icon"
-                    :class="item.icon"
-                    class="p-contextmenu-item-icon"
+                    :class="['p-contextmenu-item-icon', item.icon]"
                 />
                 <component
                     :is="item.lucideIcon"
                     v-else-if="item.lucideIcon"
-                    class="p-contextmenu-item-icon"
+                    :class="['p-contextmenu-item-icon', item.lucideIconClass]"
                 />
                 <span class="p-contextmenu-item-label">{{ item.label }}</span>
                 <ChevronRight
diff --git a/resources/js/components/primevue/menu/Menu.vue b/resources/js/components/primevue/menu/Menu.vue
index 12af809a..53b77b03 100644
--- a/resources/js/components/primevue/menu/Menu.vue
+++ b/resources/js/components/primevue/menu/Menu.vue
@@ -45,13 +45,12 @@ defineExpose({
             >
                 <i
                     v-if="item.icon"
-                    :class="item.icon"
-                    class="p-menu-item-icon"
+                    :class="['p-menu-item-icon', item.icon]"
                 />
                 <component
                     :is="item.lucideIcon"
                     v-else-if="item.lucideIcon"
-                    class="p-menu-item-icon"
+                    :class="['p-menu-item-icon', item.lucideIconClass]"
                 />
                 <span class="p-menu-item-label">{{ item.label }}</span>
             </InertiaLink>
@@ -66,13 +65,12 @@ defineExpose({
             >
                 <i
                     v-if="item.icon"
-                    :class="item.icon"
-                    class="p-menu-item-icon"
+                    :class="['p-menu-item-icon', item.icon]"
                 />
                 <component
                     :is="item.lucideIcon"
                     v-else-if="item.lucideIcon"
-                    class="p-menu-item-icon"
+                    :class="['p-menu-item-icon', item.lucideIconClass]"
                 />
                 <span class="p-menu-item-label">{{ item.label }}</span>
             </a>
diff --git a/resources/js/components/primevue/menu/Menubar.vue b/resources/js/components/primevue/menu/Menubar.vue
index 5aa3d06f..f6479b9a 100644
--- a/resources/js/components/primevue/menu/Menubar.vue
+++ b/resources/js/components/primevue/menu/Menubar.vue
@@ -46,13 +46,12 @@ defineExpose({ el: childRef });
             >
                 <i
                     v-if="item.icon"
-                    :class="item.icon"
-                    class="p-menubar-item-icon"
+                    :class="['p-menubar-item-icon', item.icon]"
                 />
                 <component
                     :is="item.lucideIcon"
                     v-else-if="item.lucideIcon"
-                    class="p-menubar-item-icon"
+                    :class="['p-menubar-item-icon', item.lucideIconClass]"
                 />
                 <span class="p-menubar-item-label">{{ item.label }}</span>
             </InertiaLink>
@@ -67,13 +66,12 @@ defineExpose({ el: childRef });
             >
                 <i
                     v-if="item.icon"
-                    :class="item.icon"
-                    class="p-menubar-item-icon"
+                    :class="['p-menubar-item-icon', item.icon]"
                 />
                 <component
                     :is="item.lucideIcon"
                     v-else-if="item.lucideIcon"
-                    class="p-menubar-item-icon"
+                    :class="['p-menubar-item-icon', item.lucideIconClass]"
                 />
                 <span class="p-menubar-item-label">{{ item.label }}</span>
                 <template v-if="hasSubmenu">
diff --git a/resources/js/components/primevue/menu/PanelMenu.vue b/resources/js/components/primevue/menu/PanelMenu.vue
index f9aec064..02c3015a 100644
--- a/resources/js/components/primevue/menu/PanelMenu.vue
+++ b/resources/js/components/primevue/menu/PanelMenu.vue
@@ -51,7 +51,7 @@ defineExpose({ el: childRef });
                 <component
                     :is="item.lucideIcon"
                     v-else-if="item.lucideIcon"
-                    :class="[root ? 'p-panelmenu-header-icon' : 'p-panelmenu-item-icon']"
+                    :class="[root ? 'p-panelmenu-header-icon' : 'p-panelmenu-item-icon', item.lucideIconClass]"
                 />
                 <span>{{ item.label }}</span>
             </InertiaLink>
@@ -74,7 +74,7 @@ defineExpose({ el: childRef });
                 <component
                     :is="item.lucideIcon"
                     v-else-if="item.lucideIcon"
-                    :class="[root ? 'p-panelmenu-header-icon' : 'p-panelmenu-item-icon']"
+                    :class="[root ? 'p-panelmenu-header-icon' : 'p-panelmenu-item-icon', item.lucideIconClass]"
                 />
                 <span>{{ item.label }}</span>
                 <template v-if="hasSubmenu">
diff --git a/resources/js/components/primevue/menu/TabMenu.vue b/resources/js/components/primevue/menu/TabMenu.vue
index 1255504f..0454b9ba 100644
--- a/resources/js/components/primevue/menu/TabMenu.vue
+++ b/resources/js/components/primevue/menu/TabMenu.vue
@@ -62,6 +62,7 @@ defineExpose({
                     <component
                         :is="item.lucideIcon"
                         v-else-if="item.lucideIcon"
+                        :class="item.lucideIconClass"
                     />
                     <span>{{ item.label }}</span>
                 </Tab>
diff --git a/resources/js/components/primevue/menu/TieredMenu.vue b/resources/js/components/primevue/menu/TieredMenu.vue
index 4a10ff64..2b451e57 100644
--- a/resources/js/components/primevue/menu/TieredMenu.vue
+++ b/resources/js/components/primevue/menu/TieredMenu.vue
@@ -45,13 +45,12 @@ defineExpose({
             >
                 <i
                     v-if="item.icon"
-                    :class="item.icon"
-                    class="p-tieredmenu-item-icon"
+                    :class="['p-tieredmenu-item-icon', item.icon]"
                 />
                 <component
                     :is="item.lucideIcon"
                     v-else-if="item.lucideIcon"
-                    class="p-tieredmenu-item-icon"
+                    :class="['p-tieredmenu-item-icon', item.lucideIconClass]"
                 />
                 <span class="p-tieredmenu-item-label">{{ item.label }}</span>
             </InertiaLink>
@@ -66,13 +65,12 @@ defineExpose({
             >
                 <i
                     v-if="item.icon"
-                    :class="item.icon"
-                    class="p-tieredmenu-item-icon"
+                    :class="['p-tieredmenu-item-icon', item.icon]"
                 />
                 <component
                     :is="item.lucideIcon"
                     v-else-if="item.lucideIcon"
-                    class="p-tieredmenu-item-icon"
+                    :class="['p-tieredmenu-item-icon', item.lucideIconClass]"
                 />
                 <span class="p-tieredmenu-item-label">{{ item.label }}</span>
                 <ChevronRight
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 9592af53..16682831 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -21,6 +21,7 @@ export type PrimeVueDataFilters = {
 export interface MenuItem extends PrimeVueMenuItem {
     route?: string;
     lucideIcon?: LucideIcon;
+    lucideIconClass?: string;
     active?: boolean;
 }