Refactor #3832 Refactor #3833 - For Chip

api-generator/components/chip.js

@@ -45,11 +45,19 @@ const ChipEvents = [
     }
 ];
 
+const ChipSlots = [
+    {
+        name: 'removeicon',
+        description: 'Custom remove icon template of chip component.'
+    }
+];
+
 module.exports = {
     chip: {
         name: 'Chip',
         description: 'Chip represents entities using icons, labels and images',
         props: ChipProps,
-        events: ChipEvents
+        events: ChipEvents,
+        slots: ChipSlots
     }
 };

components/lib/chip/Chip.d.ts

@@ -33,7 +33,6 @@ export interface ChipProps {
     removable?: boolean;
     /**
      * Icon of the remove element.
-     * @defaultValue pi pi-times-circle
      */
     removeIcon?: string;
 }
@@ -46,6 +45,20 @@ export interface ChipSlots {
      * Content can easily be customized with the default slot instead of using the built-in modes.
      */
     default(): VNode[];
+    /**
+     * Custom remove icon template of chip component.
+     * @param {Object} scope - remove icon slot's params.
+     */
+    removeicon(scope: {
+        /**
+         * Remove icon click event
+         */
+        click(): void;
+        /**
+         * Remove icon keydown event
+         */
+        keydown(): void;
+    }): VNode[];
 }
 
 /**

components/lib/chip/Chip.vue

@@ -5,11 +5,14 @@
             <span v-else-if="icon" :class="iconClass"></span>
             <div v-if="label" class="p-chip-text">{{ label }}</div>
         </slot>
-        <span v-if="removable" tabindex="0" :class="removeIconClass" @click="close" @keydown="onKeydown"></span>
+        <slot name="removeicon" :click="close" :keydown="onKeydown">
+            <component v-if="removable" :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="['p-chip-remove-icon', removeIcon]" @click="close" @keydown="onKeydown"></component>
+        </slot>
     </div>
 </template>
 
 <script>
+import TimesCircleIcon from 'primevue/icon/timescircle';
 export default {
     name: 'Chip',
     emits: ['remove'],
@@ -32,7 +35,7 @@ export default {
         },
         removeIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         }
     },
     data() {
@@ -62,10 +65,10 @@ export default {
         },
         iconClass() {
             return ['p-chip-icon', this.icon];
-        },
-        removeIconClass() {
-            return ['p-chip-remove-icon', this.removeIcon];
         }
+    },
+    components: {
+        TimesCircleIcon
     }
 };
 </script>