Refactor #3832 Refactor #3833 - For Breadcrumb

api-generator/components/breadcrumb.js

@@ -27,6 +27,10 @@ const BreadcrumbSlots = [
     {
         name: 'separator',
         description: 'Custom separator template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 

components/lib/breadcrumb/Breadcrumb.d.ts

@@ -56,6 +56,20 @@ export interface BreadcrumbSlots {
      * Custom separator template.
      */
     separator(): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**

components/lib/breadcrumb/Breadcrumb.vue

@@ -1,14 +1,14 @@
 <template>
     <nav class="p-breadcrumb p-component">
         <ol class="p-breadcrumb-list">
-            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :template="$slots.item" :exact="exact" />
+            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :templates="$slots" :exact="exact" />
             <template v-for="(item, i) of model" :key="item.label">
                 <li v-if="home || i !== 0" class="p-menuitem-separator">
                     <slot name="separator">
                         <ChevronRightIcon aria-hidden="true" />
                     </slot>
                 </li>
-                <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" />
+                <BreadcrumbItem :item="item" :templates="$slots" :exact="exact" />
             </template>
         </ol>
     </nav>

components/lib/breadcrumb/BreadcrumbItem.vue

@@ -1,18 +1,18 @@
 <template>
     <li v-if="visible()" :class="containerClass()">
-        <template v-if="!template">
+        <template v-if="!templates.item">
             <router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
                 <a :href="href" :class="linkClass({ isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)">
-                    <span v-if="item.icon" :class="iconClass"></span>
+                    <component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" />
                     <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
                 </a>
             </router-link>
             <a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick">
-                <span v-if="item.icon" :class="iconClass"></span>
+                <component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" />
                 <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
             </a>
         </template>
-        <component v-else :is="template" :item="item"></component>
+        <component v-else :is="templates.item" :item="item"></component>
     </li>
 </template>
 
@@ -21,7 +21,7 @@ export default {
     name: 'BreadcrumbItem',
     props: {
         item: null,
-        template: null,
+        templates: null,
         exact: null
     },
     methods: {