fix!: using unplugin-icons

lepture · lepture · commit 8032b90c843c · 2025-07-25T21:02:57.000+09:00
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -15,7 +15,7 @@ export default defineConfig({
       // @ts-expect-error this seems a type bug
       tailwindcss(),
       // @ts-expect-error this seems a type bug
-      Icons({ compiler: 'vue3' }),
+      Icons({ scale: 1, compiler: 'vue3' }),
     ],
     resolve: {
       alias: {
diff --git a/docs/content/components/checkbox.md b/docs/content/components/checkbox.md
@@ -18,3 +18,7 @@ radix: https://www.radix-ui.com/themes/docs/components/checkbox
 ### Size
 
 <Example name="checkbox/Size.vue" />
+
+### State
+
+<Example name="checkbox/State.vue" />
diff --git a/docs/examples/checkbox/State.vue b/docs/examples/checkbox/State.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Checkbox } from '#components'
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <Checkbox />
+    <Checkbox default-value="indeterminate" />
+    <Checkbox :default-value="true" />
+  </div>
+</template>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.58",
+    "@iconify-json/radix-icons": "^1.2.2",
     "@radix-ui/colors": "^3.0.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.0.6",
diff --git a/src/components/accordion/AccordionIndicator.vue b/src/components/accordion/AccordionIndicator.vue
@@ -9,28 +9,19 @@ export interface AccordionIndicatorProps {
 </script>
 
 <script setup lang="ts">
+import ChevronIcon from '~icons/radix-icons/chevron-right'
+
 withDefaults(defineProps<AccordionIndicatorProps>(), {
   variant: 'chevron',
 })
 </script>
 
 <template>
   <div class="ui-AccordionIndicator">
-    <svg
+    <ChevronIcon
       v-if="variant == 'chevron'"
       class="ui-AccordionIndicator-chevron"
-      xmlns="http://www.w3.org/2000/svg"
-      width="1em"
-      height="1em"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="m9 18 6-6-6-6" />
-    </svg>
+    />
     <div v-if="variant == 'plus'" class="ui-AccordionIndicator-plus">
       <span class="ui-AccordionIndicator-plus-1"></span>
       <span class="ui-AccordionIndicator-plus-2"></span>
diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
@@ -38,21 +38,23 @@ const resetClass = buildPropsClass(props, ['size', 'variant', 'highContrast'])
         as-child
       >
         <svg
+          width="9"
+          height="9"
+          viewBox="0 0 9 9"
+          fill="currentcolor"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="4"
-          stroke-linecap="round"
-          stroke-linejoin="round"
         >
           <path
             v-if="state === 'indeterminate'"
-            d="M5 12h14"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z"
           />
           <path
             v-else
-            d="M20 6 9 17l-5-5"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z"
           />
         </svg>
       </CheckboxIndicator>
diff --git a/src/components/collapsible/CollapsibleIndicator.vue b/src/components/collapsible/CollapsibleIndicator.vue
@@ -1,18 +1,9 @@
+<script setup lang="ts">
+  import ChevronIcon from '~icons/radix-icons/chevron-right'
+</script>
+
 <template>
-  <svg
-    class="ui-CollapsibleIndicator"
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path d="m9 18 6-6-6-6" />
-  </svg>
+  <ChevronIcon class="ui-CollapsibleIndicator" />
 </template>
 
 <style>
diff --git a/src/components/combobox/ComboboxInput.vue b/src/components/combobox/ComboboxInput.vue
@@ -23,7 +23,7 @@ import {
   useForwardPropsEmits,
   injectComboboxRootContext,
 } from 'reka-ui'
-import { Icon } from '@iconify/vue'
+import ChevronDownIcon from '~icons/radix-icons/chevron-down'
 
 defineOptions({
   inheritAttrs: false,
@@ -134,7 +134,7 @@ watch(values, () => {
       }"
     />
     <ComboboxTrigger class="ui-ComboboxTrigger">
-      <Icon icon="radix-icons:chevron-down" />
+      <ChevronDownIcon />
     </ComboboxTrigger>
   </ComboboxAnchor>
 </template>
diff --git a/src/components/combobox/ComboboxItem.vue b/src/components/combobox/ComboboxItem.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
 import {
   ComboboxItem,
   ComboboxItemIndicator,
   useForwardProps,
   type ComboboxItemProps,
 } from 'reka-ui'
+import CheckIcon from '~icons/radix-icons/check'
 
 const props = defineProps<ComboboxItemProps>()
 const forwarded = useForwardProps(props)
@@ -17,7 +17,7 @@ const forwarded = useForwardProps(props)
     v-bind="forwarded"
   >
     <ComboboxItemIndicator class="ui-ComboboxItemIndicator">
-      <Icon icon="radix-icons:check" />
+      <CheckIcon />
     </ComboboxItemIndicator>
     <slot></slot>
   </ComboboxItem>
diff --git a/src/components/icon/ChevronIcon.vue b/src/components/icon/ChevronIcon.vue
diff --git a/src/components/icon/PlusMinusIcon.vue b/src/components/icon/PlusMinusIcon.vue
diff --git a/src/components/icon/index.ts b/src/components/icon/index.ts
@@ -5,12 +5,4 @@ export {
   type IconCircleProps,
 } from './IconCircle.vue'
 
-export {
-  default as PlusMinusIcon,
-} from './PlusMinusIcon.vue'
-
-export {
-  default as ChevronIcon,
-} from './ChevronIcon.vue'
-
 export { Icon }
diff --git a/src/components/select/SelectItem.vue b/src/components/select/SelectItem.vue
@@ -3,14 +3,14 @@ import type { SelectItemProps } from 'reka-ui'
 </script>
 
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
 import {
   SelectItem,
   SelectItemIndicator,
   SelectItemText,
   useForwardExpose,
   useForwardProps,
 } from 'reka-ui'
+import CheckIcon from '~icons/radix-icons/check'
 
 const props = defineProps<SelectItemProps>()
 const forwarded = useForwardProps(props)
@@ -24,7 +24,7 @@ useForwardExpose()
     v-bind="forwarded"
   >
     <SelectItemIndicator class="ui-SelectItemIndicator">
-      <Icon icon="radix-icons:check" />
+      <CheckIcon />
     </SelectItemIndicator>
     <SelectItemText>
       <slot></slot>
diff --git a/src/components/select/SelectTrigger.vue b/src/components/select/SelectTrigger.vue
@@ -11,8 +11,8 @@ export interface SelectTriggerProps extends _SelectTriggerProps {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Icon } from '@iconify/vue'
 import { SelectTrigger, SelectValue, SelectIcon } from 'reka-ui'
+import ChevronDownIcon from '~icons/radix-icons/chevron-down'
 import { injectSelectRootContext } from './SelectRoot.vue'
 
 const props = withDefaults(defineProps<SelectTriggerProps>(), {
@@ -47,10 +47,7 @@ const resetClass = computed(() => {
       </SelectValue>
     </span>
     <SelectIcon as-child>
-      <Icon
-        class="ui-SelectIcon"
-        icon="radix-icons:chevron-down"
-      />
+      <ChevronDownIcon class="ui-SelectIcon" />
     </SelectIcon>
   </SelectTrigger>
 </template>
diff --git a/vite.config.ts b/vite.config.ts
