feat(experimental/Select!): customizable icons

gitsindonesia · Aug 2, 2023 · bf4271e · bf4271e
1 parent a2dc747
commit bf4271e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/packages/select/src/Select.stories.ts b/packages/select/src/Select.stories.ts
@@ -125,6 +125,14 @@ Empty.args = {
   items: [],
 };
 
+export const CustomIcon = Template.bind({});
+CustomIcon.args = {
+  icon: 'heroicons:chevron-up-down',
+  checkIcon: 'heroicons:check-circle',
+  clearIcon: 'heroicons:x-circle',
+  clearable: true,
+};
+
 export const Uncontrolled: Story<typeof Select> = (args) => ({
   components: {
     Select,

diff --git a/packages/select/src/Select.vue b/packages/select/src/Select.vue
@@ -65,6 +65,9 @@ const props = withDefaults(
     searchPlacement?: 'inside' | 'outside';
     searchPlaceholder?: string;
     chips?: boolean;
+    icon?: string;
+    checkIcon?: string;
+    clearIcon?: string;
   }>(),
   {
     itemText: 'text',
@@ -82,6 +85,9 @@ const props = withDefaults(
     hideError: false,
     searchPlacement: 'inside',
     searchPlaceholder: 'Search...',
+    icon: 'heroicons:chevron-down',
+    checkIcon: 'heroicons:check',
+    clearIcon: 'heroicons:x-mark',
   },
 );
 
@@ -334,19 +340,15 @@ defineSlots<{
                   @click="clear"
                 >
                   <VIcon
-                    name="heroicons:x-mark"
+                    :name="clearIcon"
                     class="v-select-icon"
                     :size="iconSize"
                   />
                 </button>
               </template>
               <span> {{ clearText }} </span>
             </VTooltip>
-            <VIcon
-              name="heroicons:chevron-down"
-              class="v-select-icon"
-              :size="iconSize"
-            />
+            <VIcon :name="icon" class="v-select-icon" :size="iconSize" />
           </div>
         </component>
       </slot>
@@ -401,7 +403,7 @@ defineSlots<{
                   >
                     <VIcon
                       v-if="selected"
-                      name="heroicons:check"
+                      :name="checkIcon"
                       class="v-select-option-check-icon"
                       size="sm"
                     />