From de3aac4fa24676a9231f0519153afdc49305bde6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 5 Apr 2023 14:55:26 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For Breadcrumb

---
 api-generator/components/breadcrumb.js    | 6 +++++-
 components/lib/breadcrumb/Breadcrumb.d.ts | 4 ++++
 components/lib/breadcrumb/Breadcrumb.vue  | 8 ++++++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/api-generator/components/breadcrumb.js b/api-generator/components/breadcrumb.js
index ccd97f768..e466fb154 100644
--- a/api-generator/components/breadcrumb.js
+++ b/api-generator/components/breadcrumb.js
@@ -22,7 +22,11 @@ const BreadcrumbProps = [
 const BreadcrumbSlots = [
     {
         name: 'item',
-        description: 'Template of a menuitem.'
+        description: 'Custom item template.'
+    },
+    {
+        name: 'separator',
+        description: 'Custom separator template.'
     }
 ];
 
diff --git a/components/lib/breadcrumb/Breadcrumb.d.ts b/components/lib/breadcrumb/Breadcrumb.d.ts
index 96cbd96ad..7e4675394 100755
--- a/components/lib/breadcrumb/Breadcrumb.d.ts
+++ b/components/lib/breadcrumb/Breadcrumb.d.ts
@@ -52,6 +52,10 @@ export interface BreadcrumbSlots {
          */
         item: MenuItem;
     }): VNode[];
+    /**
+     * Custom separator template.
+     */
+    separator(): VNode[];
 }
 
 /**
diff --git a/components/lib/breadcrumb/Breadcrumb.vue b/components/lib/breadcrumb/Breadcrumb.vue
index 8e48401c9..e59e31a09 100755
--- a/components/lib/breadcrumb/Breadcrumb.vue
+++ b/components/lib/breadcrumb/Breadcrumb.vue
@@ -4,7 +4,9 @@
             <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :template="$slots.item" :exact="exact" />
             <template v-for="(item, i) of model" :key="item.label">
                 <li v-if="home || i !== 0" class="p-menuitem-separator">
-                    <span class="pi pi-chevron-right" aria-hidden="true"></span>
+                    <slot name="separator">
+                        <ChevronRightIcon aria-hidden="true" />
+                    </slot>
                 </li>
                 <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" />
             </template>
@@ -13,6 +15,7 @@
 </template>
 
 <script>
+import ChevronRightIcon from 'primevue/icon/chevronright';
 import BreadcrumbItem from './BreadcrumbItem.vue';
 
 export default {
@@ -32,7 +35,8 @@ export default {
         }
     },
     components: {
-        BreadcrumbItem: BreadcrumbItem
+        BreadcrumbItem: BreadcrumbItem,
+        ChevronRightIcon: ChevronRightIcon
     }
 };
 </script>