From c35ef2ccd571ff3f5a00e6899558b113a159b59d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Tue, 11 Apr 2023 10:32:40 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For TabView

---
 api-generator/components/tabview.js | 12 ++++++++++++
 components/lib/tabview/TabView.d.ts |  8 ++++++++
 components/lib/tabview/TabView.vue  | 19 ++++++++++++++++---
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/api-generator/components/tabview.js b/api-generator/components/tabview.js
index a632fe72a..41d4879ab 100644
--- a/api-generator/components/tabview.js
+++ b/api-generator/components/tabview.js
@@ -41,6 +41,18 @@ const TabViewProps = [
         default: 'null',
         description: 'Uses to pass all properties of the HTMLButtonElement to the next button.'
     },
+    {
+        name: 'prevIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Prev icon of the scrollable tabview.'
+    },
+    {
+        name: 'nextIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Next icon of the scrollable tabview.'
+    },
     {
         name: 'pt',
         type: 'any',
diff --git a/components/lib/tabview/TabView.d.ts b/components/lib/tabview/TabView.d.ts
index e44dd41fc..c2dc6e423 100755
--- a/components/lib/tabview/TabView.d.ts
+++ b/components/lib/tabview/TabView.d.ts
@@ -151,6 +151,14 @@ export interface TabViewProps {
      * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     nextButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Prev icon of the scrollable tabview.
+     */
+    prevIcon?: string | undefined;
+    /**
+     * Next icon of the scrollable tabview.
+     */
+    nextIcon?: string | undefined;
     /**
      * Uses to pass attributes to DOM elements inside the component.
      * @type {TabViewPassThroughOptions}
diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue
index 195838a75..86ab2ba9c 100755
--- a/components/lib/tabview/TabView.vue
+++ b/components/lib/tabview/TabView.vue
@@ -13,7 +13,7 @@
                 v-bind="{ ...previousButtonProps, ...ptm('prevbutton') }"
             >
                 <slot name="previcon">
-                    <span class="pi pi-chevron-left" aria-hidden="true" v-bind="ptm('previcon')"></span>
+                    <component :is="prevIcon ? prevIcon : 'ChevronLeftIcon'" v-bind="ptm('previcon')" aria-hidden="true" />
                 </slot>
             </button>
             <div ref="content" class="p-tabview-nav-content" @scroll="onScroll" v-bind="ptm('navcontent')">
@@ -59,7 +59,7 @@
                 v-bind="{ ...nextButtonProps, ...ptm('nextbutton') }"
             >
                 <slot name="nexticon">
-                    <span class="pi pi-chevron-right" aria-hidden="true" v-bind="ptm('nexticon')"></span>
+                    <component :is="nextIcon ? nextIcon : 'ChevronRightIcon'" v-bind="ptm('nexticon')" aria-hidden="true" />
                 </slot>
             </button>
         </div>
@@ -85,7 +85,8 @@
 import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
-
+import ChevronLeftIcon from 'primevue/icon/chevronleft';
+import ChevronRightIcon from 'primevue/icon/chevronright';
 export default {
     name: 'TabView',
     extends: BaseComponent,
@@ -118,6 +119,14 @@ export default {
         nextButtonProps: {
             type: null,
             default: null
+        },
+        prevIcon: {
+            type: String,
+            default: undefined
+        },
+        nextIcon: {
+            type: String,
+            default: undefined
         }
     },
     data() {
@@ -391,6 +400,10 @@ export default {
     },
     directives: {
         ripple: Ripple
+    },
+    components: {
+        ChevronLeftIcon,
+        ChevronRightIcon
     }
 };
 </script>