refactor: replace lucide-vue-next icons with iconify in select components

Author: ErwanDecoster

components.json

@@ -16,5 +16,5 @@
     "ui": "@/components/ui",
     "lib": "@/lib"
   },
-  "iconLibrary": "lucide"
+  "iconLibrary": "iconify"
 }

package-lock.json

@@ -20,7 +20,6 @@
     "@vueuse/core": "^13.6.0",
     "@wagmi/vue": "^0.1.24",
     "clsx": "^2.1.1",
-    "lucide-vue-next": "^0.539.0",
     "pinia": "^3.0.3",
     "reka-ui": "^2.4.1",
     "tailwind-merge": "^3.3.1",

package.json

@@ -2,7 +2,7 @@
 import type { SelectItemProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { Check } from 'lucide-vue-next';
+import { Icon } from '@iconify/vue';
 import {
   SelectItem,
   SelectItemIndicator,
@@ -33,7 +33,7 @@ const forwardedProps = useForwardProps(delegatedProps);
   >
     <span class="absolute right-2 flex size-3.5 items-center justify-center">
       <SelectItemIndicator>
-        <Check class="size-4" />
+        <Icon icon="lucide:check" class="size-4" />
       </SelectItemIndicator>
     </span>
 

src/components/ui/select/SelectItem.vue

@@ -2,7 +2,7 @@
 import type { SelectScrollDownButtonProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ChevronDown } from 'lucide-vue-next';
+import { Icon } from '@iconify/vue';
 import { SelectScrollDownButton, useForwardProps } from 'reka-ui';
 import { cn } from '@/lib/utils';
 
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     "
   >
     <slot>
-      <ChevronDown class="size-4" />
+      <Icon icon="lucide:chevron-down" class="size-4" />
     </slot>
   </SelectScrollDownButton>
 </template>

src/components/ui/select/SelectScrollDownButton.vue

@@ -2,7 +2,7 @@
 import type { SelectScrollUpButtonProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ChevronUp } from 'lucide-vue-next';
+import { Icon } from '@iconify/vue';
 import { SelectScrollUpButton, useForwardProps } from 'reka-ui';
 import { cn } from '@/lib/utils';
 
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     "
   >
     <slot>
-      <ChevronUp class="size-4" />
+      <Icon icon="lucide:chevron-up" class="size-4" />
     </slot>
   </SelectScrollUpButton>
 </template>

src/components/ui/select/SelectScrollUpButton.vue

@@ -2,7 +2,7 @@
 import type { SelectTriggerProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ChevronDown } from 'lucide-vue-next';
+import { Icon } from '@iconify/vue';
 import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
 import { cn } from '@/lib/utils';
 
@@ -34,7 +34,7 @@ const forwardedProps = useForwardProps(delegatedProps);
   >
     <slot />
     <SelectIcon as-child>
-      <ChevronDown class="size-4 opacity-50" />
+      <Icon icon="lucide:chevron-down" class="size-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>