From 46f63c068ea3afe38f7a0c7ee42826fd71c56ba7 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 17 Apr 2023 08:42:20 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For Breadcrumb

---
 api-generator/components/breadcrumb.js       |  4 ++++
 components/lib/breadcrumb/Breadcrumb.d.ts    | 14 ++++++++++++++
 components/lib/breadcrumb/Breadcrumb.vue     |  4 ++--
 components/lib/breadcrumb/BreadcrumbItem.vue | 10 +++++-----
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/api-generator/components/breadcrumb.js b/api-generator/components/breadcrumb.js
index e466fb154..5aa6d7d91 100644
--- a/api-generator/components/breadcrumb.js
+++ b/api-generator/components/breadcrumb.js
@@ -27,6 +27,10 @@ const BreadcrumbSlots = [
     {
         name: 'separator',
         description: 'Custom separator template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 
diff --git a/components/lib/breadcrumb/Breadcrumb.d.ts b/components/lib/breadcrumb/Breadcrumb.d.ts
index 7e4675394..2aaf5299b 100755
--- a/components/lib/breadcrumb/Breadcrumb.d.ts
+++ b/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[];
 }
 
 /**
diff --git a/components/lib/breadcrumb/Breadcrumb.vue b/components/lib/breadcrumb/Breadcrumb.vue
index e59e31a09..d242a2538 100755
--- a/components/lib/breadcrumb/Breadcrumb.vue
+++ b/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>
diff --git a/components/lib/breadcrumb/BreadcrumbItem.vue b/components/lib/breadcrumb/BreadcrumbItem.vue
index ae863e4b5..135d3d86d 100755
--- a/components/lib/breadcrumb/BreadcrumbItem.vue
+++ b/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: {