Refactor #3832 Refactor #3833 - For Checkbox

api-generator/components/checkbox.js

@@ -106,11 +106,19 @@ const CheckboxEvents = [
     }
 ];
 
+const CheckboxSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    }
+];
+
 module.exports = {
     checkbox: {
         name: 'Checkbox',
         description: 'Checkbox is an extension to standard checkbox element with theming.',
         props: CheckboxProps,
-        events: CheckboxEvents
+        events: CheckboxEvents,
+        slots: CheckboxSlots
     }
 };

components/lib/checkbox/Checkbox.d.ts

@@ -7,7 +7,7 @@
  * @module checkbox
  *
  */
-import { InputHTMLAttributes } from 'vue';
+import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 /**
@@ -86,7 +86,18 @@ export interface CheckboxProps {
     'aria-label'?: string | undefined;
 }
 
-export interface CheckboxSlots {}
+export interface CheckboxSlots {
+    /**
+     * Custom icon template.
+     * @param {Object} scope - icon slot's params.
+     */
+    icon(scope: {
+        /**
+         * State of the checkbox.
+         */
+        checked: boolean;
+    }): VNode[];
+}
 
 /**
  * Defines valid emits in Checkbox component.

components/lib/checkbox/Checkbox.vue

@@ -20,12 +20,15 @@
             />
         </div>
         <div ref="box" :class="['p-checkbox-box', inputClass, { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" :style="inputStyle">
-            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
+            <slot name="icon" :checked="checked">
+                <component :is="checked ? 'CheckIcon' : null" class="p-checkbox-icon" />
+            </slot>
         </div>
     </div>
 </template>
 
 <script>
+import CheckIcon from 'primevue/icon/check';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
@@ -135,6 +138,9 @@ export default {
                 }
             ];
         }
+    },
+    components: {
+        CheckIcon: CheckIcon
     }
 };
 </script>