Refactor #3832 Refactor #3833 - For ScrollTop

api-generator/components/scrolltop.js

@@ -14,7 +14,7 @@ const ScrollTopProps = [
     {
         name: 'icon',
         type: 'string',
-        default: 'pi pi-chevron-up',
+        default: 'undefined',
         description: 'Icon to display.'
     },
     {
@@ -25,10 +25,18 @@ const ScrollTopProps = [
     }
 ];
 
+const ScrollTopSlots = [
+    {
+        name: 'icon',
+        description: 'Custom scrolltop icon template.'
+    }
+];
+
 module.exports = {
     scrolltop: {
         name: 'ScrollTop',
         description: 'ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.',
-        props: ScrollTopProps
+        props: ScrollTopProps,
+        slots: ScrollTopSlots
     }
 };

components/lib/scrolltop/ScrollTop.d.ts

@@ -7,6 +7,7 @@
  * @module scrolltop
  *
  */
+import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 /**
@@ -25,7 +26,6 @@ export interface ScrollTopProps {
     threshold?: number | undefined;
     /**
      * Icon to display.
-     * @defaultValue pi pi-chevron-up
      */
     icon?: string | undefined;
     /**
@@ -38,7 +38,12 @@ export interface ScrollTopProps {
 /**
  * Defines valid slots in ScrollTop component.
  */
-export interface ScrollTopSlots {}
+export interface ScrollTopSlots {
+    /**
+     * Custom scrolltop icon template.
+     */
+    icon(): VNode[];
+}
 
 /**
  * Defines valid emits in ScrollTop component.

components/lib/scrolltop/ScrollTop.vue

@@ -1,14 +1,16 @@
 <template>
     <transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave">
         <button v-if="visible" :ref="containerRef" :class="containerClass" @click="onClick" type="button" :aria-label="scrollTopAriaLabel">
-            <span :class="iconClass"></span>
+            <slot name="icon">
+                <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="['p-scrolltop-icon', icon]"></component>
+            </slot>
         </button>
     </transition>
 </template>
 
 <script>
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
-
+import ChevronUpIcon from 'primevue/icon/chevronup';
 export default {
     name: 'ScrollTop',
     scrollListener: null,
@@ -24,7 +26,7 @@ export default {
         },
         icon: {
             type: String,
-            default: 'pi pi-chevron-up'
+            default: undefined
         },
         behavior: {
             type: String,
@@ -102,12 +104,12 @@ export default {
         containerClass() {
             return ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': this.target !== 'window' }];
         },
-        iconClass() {
-            return ['p-scrolltop-icon', this.icon];
-        },
         scrollTopAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.scrollTop : undefined;
         }
+    },
+    components: {
+        ChevronUpIcon
     }
 };
 </script>