Merge pull request #46 from connorabbas/develop

Feature: Menu components class property for Lucide icons

Author: connorabbas

src/components/primevue/menu/Breadcrumb.vue

@@ -42,13 +42,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>
@@ -64,13 +63,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>

src/components/primevue/menu/Menu.vue

@@ -51,13 +51,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>
@@ -73,13 +72,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>

src/components/primevue/menu/MenuBar.vue

@@ -52,13 +52,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>
                 </a>
@@ -74,13 +73,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">

src/components/primevue/menu/PanelMenu.vue

@@ -62,6 +62,7 @@ defineExpose({ el: childRef });
                         v-else-if="item.lucideIcon"
                         :class="[
                             root ? 'p-panelmenu-header-icon' : 'p-panelmenu-item-icon',
+                            item.lucideIconClass,
                         ]"
                     />
                     <span>{{ item.label }}</span>
@@ -91,6 +92,7 @@ defineExpose({ el: childRef });
                     v-else-if="item.lucideIcon"
                     :class="[
                         root ? 'p-panelmenu-header-icon' : 'p-panelmenu-item-icon',
+                        item.lucideIconClass,
                     ]"
                 />
                 <span>{{ item.label }}</span>

src/types/index.d.ts

@@ -16,4 +16,6 @@ export type PrimeVueDataFilters = {
 export interface MenuItem extends PrimeVueMenuItem {
     route?: string;
     lucideIcon?: LucideIcon;
+    lucideIconClass?: string;
+    active?: boolean;
 }