refactor: changes all instance of unplugin-icons to radix-icons

2023-09-27 11:58:32 +08:00 · 2023-09-27 11:58:32 +08:00 · 66c51ab339
commit 66c51ab339
parent 88c159dc82
34 changed files with 82 additions and 77 deletions
--- a/apps/www/package.json
+++ b/apps/www/package.json
@ -13,6 +13,7 @@
  },
  "dependencies": {
    "@morev/vue-transitions": "^2.3.6",
+    "@radix-icons/vue": "^1.0.0",
    "@tanstack/vue-table": "^8.9.9",
    "@unovis/ts": "^1.2.1",
    "@unovis/vue": "1.3.0-alpha.3",
--- a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
@ -14,9 +14,8 @@ import {
  useVueTable,
 } from '@tanstack/vue-table'
 import { h, ref } from 'vue'
+import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import DropdownAction from '../DataTableDemoColumn.vue'
-import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
-import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'

 import { Button } from '@/lib/registry/default/ui/button'
 import { Checkbox } from '@/lib/registry/default/ui/checkbox'
@ -105,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
      return h(Button, {
        variant: 'ghost',
        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
+      }, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
    },
    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
  },
@ -180,7 +179,7 @@ const table = useVueTable({
          <DropdownMenu>
            <DropdownMenuTrigger as-child>
              <Button variant="outline" class="ml-auto">
-                Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
+                Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
@ -5,8 +5,8 @@ import {
  type MenubarCheckboxItemProps,
  MenubarItemIndicator,
 } from 'radix-vue'
+import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
-import RadixIconsCheck from '~icons/radix-icons/check'

 const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()

@ -28,7 +28,7 @@ const emit = defineEmits<MenubarCheckboxItemEmits>()
    <MenubarItemIndicator
      class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
    >
-      <RadixIconsCheck class="w-4 h-4" />
+      <Check class="w-4 h-4" />
    </MenubarItemIndicator>
    <slot />
  </MenubarCheckboxItem>
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
@ -5,8 +5,8 @@ import {
  type MenubarRadioItemEmits,
  type MenubarRadioItemProps,
 } from 'radix-vue'
+import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
-import RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'

 const props = defineProps<MenubarRadioItemProps & { class?: string }>()

@ -27,7 +27,7 @@ const emits = defineEmits<MenubarRadioItemEmits>()
    <MenubarItemIndicator
      class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
    >
-      <RiCheckboxBlankCircleFill class="h-2 w-2 fill-curren" />
+      <Circle class="h-2 w-2 fill-curren" />
    </MenubarItemIndicator>

    <slot />
--- a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
+++ b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
@ -4,8 +4,8 @@ import {
  RadioGroupItem,
  type RadioGroupItemProps,
 } from 'radix-vue'
+import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
-import RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'

 const props = defineProps<RadioGroupItemProps & { class?: string }>()
 </script>
@ -23,7 +23,7 @@ const props = defineProps<RadioGroupItemProps & { class?: string }>()
    <RadioGroupIndicator
      :class="cn('flex items-center justify-center', props.class)"
    >
-      <RiCheckboxBlankCircleFill class="w-2.5 h-2.5 text-foreground" />
+      <Circle class="w-2.5 h-2.5 text-foreground" />
    </RadioGroupIndicator>
  </RadioGroupItem>
 </template>
--- a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
@ -5,8 +5,8 @@ import {
  type SelectItemProps,
  SelectItemText,
 } from 'radix-vue'
+import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
-import RadixIconsCheck from '~icons/radix-icons/check'

 const props = defineProps<SelectItemProps & { class?: string }>()
 </script>
@ -23,7 +23,7 @@ const props = defineProps<SelectItemProps & { class?: string }>()
  >
    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectItemIndicator>
-        <RadixIconsCheck class="h-4 w-4" />
+        <Check class="h-4 w-4" />
      </SelectItemIndicator>
    </span>

--- a/apps/www/src/lib/registry/new-york/example/AlertDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/AlertDemo.vue
@ -1,11 +1,11 @@
 <script setup lang="ts">
-import RadixIconsRocket from '~icons/radix-icons/rocket'
+import { RocketIcon } from '@radix-icons/vue'
 import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
 </script>

 <template>
  <Alert>
-    <RadixIconsRocket class="h-4 w-4" />
+    <RocketIcon class="h-4 w-4" />
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
      You can add components to your app using the cli.
--- a/apps/www/src/lib/registry/new-york/example/CardDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
@ -1,7 +1,5 @@
 <script setup lang="ts">
-import RadixIconsBell from '~icons/radix-icons/bell'
-import RadixIconsCheck from '~icons/radix-icons/check'
-
+import { BellIcon, CheckIcon } from '@radix-icons/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
  Card,
@ -38,7 +36,7 @@ const notifications = [
    </CardHeader>
    <CardContent class="grid gap-4">
      <div class=" flex items-center space-x-4 rounded-md border p-4">
-        <RadixIconsBell />
+        <BellIcon />
        <div class="flex-1 space-y-1">
          <p class="text-sm font-medium leading-none">
            Push Notifications
@ -68,7 +66,7 @@ const notifications = [
    </CardContent>
    <CardFooter>
      <Button class="w-full">
-        <RadixIconsCheck class="mr-2 h-4 w-4" /> Mark all as read
+        <CheckIcon class="mr-2 h-4 w-4" /> Mark all as read
      </Button>
    </CardFooter>
  </Card>
--- a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
-import Minus from '~icons/radix-icons/minus'
-import Plus from '~icons/radix-icons/plus'
+import { MinusIcon, PlusIcon } from '@radix-icons/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'

 import {
@ -54,7 +53,7 @@ const data = [
          :disabled="goal <= 200"
          @click="goal -= 10"
        >
-          <Minus class="h-4 w-4" />
+          <MinusIcon class="h-4 w-4" />
          <span class="sr-only">Decrease</span>
        </Button>
        <div class="flex-1 text-center">
@ -72,7 +71,7 @@ const data = [
          :disabled="goal >= 400"
          @click="goal += 10 "
        >
-          <Plus class="h-4 w-4" />
+          <PlusIcon class="h-4 w-4" />
          <span class="sr-only">Increase</span>
        </Button>
      </div>
--- a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
@ -14,9 +14,8 @@ import {
  useVueTable,
 } from '@tanstack/vue-table'
 import { h, ref } from 'vue'
+import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import DropdownAction from '../DataTableDemoColumn.vue'
-import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
-import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'

 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
@ -105,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
      return h(Button, {
        variant: 'ghost',
        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
+      }, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
    },
    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
  },
@ -180,7 +179,7 @@ const table = useVueTable({
          <DropdownMenu>
            <DropdownMenuTrigger as-child>
              <Button variant="outline" class="ml-auto">
-                Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
+                Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
--- a/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
+import { CaretSortIcon } from '@radix-icons/vue'

 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
@ -23,7 +23,7 @@ const isOpen = ref(false)
      </h4>
      <CollapsibleTrigger as-child>
        <Button variant="ghost" size="sm" class="w-9 p-0">
-          <RadixIconsCaretSort class="h-4 w-4" />
+          <CaretSortIcon class="h-4 w-4" />
          <span class="sr-only">Toggle</span>
        </Button>
      </CollapsibleTrigger>
--- a/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import Check from '~icons/radix-icons/check'
-import CaretSort from '~icons/radix-icons/caret-sort'
+import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'

 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
@ -42,7 +41,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
        class="w-[200px] justify-between"
      >
        {{ value ? value.label : 'Select framework...' }}
-        <CaretSort class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
      </Button>
    </PopoverTrigger>
    <PopoverContent class="w-[200px] p-0">
@ -57,7 +56,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
            @select="open = false"
          >
            {{ framework.label }}
-            <Check
+            <CheckIcon
              :class="cn(
                'ml-auto h-4 w-4',
                value?.value === framework.value ? 'opacity-100' : 'opacity-0',
--- a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
@ -14,9 +14,8 @@ import {
  useVueTable,
 } from '@tanstack/vue-table'
 import { h, ref } from 'vue'
+import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import DropdownAction from './DataTableDemoColumn.vue'
-import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
-import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'

 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
@ -104,7 +103,7 @@ const columns: ColumnDef<Payment>[] = [
      return h(Button, {
        variant: 'ghost',
        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
+      }, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
    },
    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
  },
@ -173,7 +172,7 @@ const table = useVueTable({
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <Button variant="outline" class="ml-auto">
-            Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
+            Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
--- a/apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RadixIconsDotsHorizontal from '~icons/radix-icons/dots-horizontal'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
 import { Button } from '@/lib/registry/new-york/ui/button'

@ -19,7 +19,7 @@ function copy(id: string) {
    <DropdownMenuTrigger as-child>
      <Button variant="ghost" class="h-8 w-8 p-0">
        <span class="sr-only">Open menu</span>
-        <RadixIconsDotsHorizontal class="h-4 w-4" />
+        <DotsHorizontalIcon class="h-4 w-4" />
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
--- a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { format } from 'date-fns'
 import { ref } from 'vue'
-import RadixIconsCalendar from '~icons/radix-icons/calendar'
+import { CalendarIcon } from '@radix-icons/vue'

 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
@ -25,7 +25,7 @@ const date = ref<Date>()
          !date && 'text-muted-foreground',
        )"
      >
-        <RadixIconsCalendar class="mr-2 h-4 w-4" />
+        <CalendarIcon class="mr-2 h-4 w-4" />
        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
      </Button>
    </PopoverTrigger>
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { addDays, format } from 'date-fns'
 import { ref } from 'vue'
-import RadixIconsCalendar from '~icons/radix-icons/calendar'
+import { CalendarIcon } from '@radix-icons/vue'

 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
@ -30,7 +30,7 @@ const date = ref({
            !date && 'text-muted-foreground',
          )"
        >
-          <RadixIconsCalendar class="mr-2 h-4 w-4" />
+          <CalendarIcon class="mr-2 h-4 w-4" />

          <span>
            {{ date.start ? (
--- a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RadixIconsCalendar from '~icons/radix-icons/calendar'
+import { CalendarIcon } from '@radix-icons/vue'

 import {
  Avatar,
@ -35,7 +35,7 @@ import {
            Progressive JavaScript framework for building modern web interfaces.
          </p>
          <div class="flex items-center pt-2">
-            <RadixIconsCalendar class="mr-2 h-4 w-4 opacity-70" />
+            <CalendarIcon class="mr-2 h-4 w-4 opacity-70" />
            <span class="text-xs text-muted-foreground">
              Joined January 2014
            </span>
--- a/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
@ -1,11 +1,11 @@
 <script setup lang="ts">
-import RadixIconsFontBold from '~icons/radix-icons/font-bold'
+import { FontBoldIcon } from '@radix-icons/vue'

 import { Toggle } from '@/lib/registry/new-york/ui/toggle'
 </script>

 <template>
  <Toggle aria-label="Toggle italic">
-    <RadixIconsFontBold class="h-4 w-4" />
+    <FontBoldIcon class="h-4 w-4" />
  </Toggle>
 </template>
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
@ -4,7 +4,7 @@ import {
  AccordionTrigger,
  type AccordionTriggerProps,
 } from 'radix-vue'
-import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
+import { ChevronDownIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'

 const props = defineProps<AccordionTriggerProps & { class?: string }>()
@ -22,7 +22,7 @@ const props = defineProps<AccordionTriggerProps & { class?: string }>()
      "
    >
      <slot />
-      <RadixIconsChevronDown
+      <ChevronDownIcon
        class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
      />
    </AccordionTrigger>
--- a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
+++ b/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
 import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
-import RadixIconsCheck from '~icons/radix-icons/check'
+import { CheckIcon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'

 const props = defineProps<CheckboxRootProps>()
@ -18,7 +18,7 @@ const emitsAsProps = useEmitAsProps(emits)
         $attrs.class ?? '')"
  >
    <CheckboxIndicator class="flex items-center justify-center text-current">
-      <RadixIconsCheck class="h-4 w-4" />
+      <CheckIcon class="h-4 w-4" />
    </CheckboxIndicator>
  </CheckboxRoot>
 </template>
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
@ -5,7 +5,7 @@ import {
  type ContextMenuCheckboxItemProps,
  ContextMenuItemIndicator,
 } from 'radix-vue'
-import RadixIconsCheck from '~icons/radix-icons/check'
+import { CheckIcon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'

 const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()
@ -26,7 +26,7 @@ const emits = defineEmits<ContextMenuCheckboxItemEmits>()
      <ContextMenuItemIndicator
        class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
      >
-        <RadixIconsCheck class="h-4 w-4" />
+        <CheckIcon class="h-4 w-4" />
      </ContextMenuItemIndicator>
    </span>
    <slot />
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
@ -5,7 +5,7 @@ import {
  type ContextMenuRadioItemEmits,
  type ContextMenuRadioItemProps,
 } from 'radix-vue'
-import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
+import { DotFilledIcon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'

 const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
@ -24,7 +24,7 @@ const emits = defineEmits<ContextMenuRadioItemEmits>()
  >
    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuItemIndicator>
-        <RadixIconsDotFilled class="h-4 w-4 fill-current" />
+        <DotFilledIcon class="h-4 w-4 fill-current" />
      </ContextMenuItemIndicator>
    </span>
    <slot />
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
@ -7,7 +7,7 @@ import {
  DialogOverlay,
  DialogPortal,
 } from 'radix-vue'
-import RadixIconsCross2 from '~icons/radix-icons/cross-2'
+import { Cross2Icon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'

 const props = defineProps<DialogContentProps & { class?: string }>()
@ -35,7 +35,7 @@ const emitsAsProps = useEmitAsProps(emits)
      <DialogClose
        class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
      >
-        <RadixIconsCross2 class="w-4 h-4" />
+        <Cross2Icon class="w-4 h-4" />
        <span class="sr-only">Close</span>
      </DialogClose>
    </DialogContent>
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@ -5,7 +5,7 @@ import {
  type DropdownMenuCheckboxItemProps,
  DropdownMenuItemIndicator,
 } from 'radix-vue'
-import RadixIconsCheck from '~icons/radix-icons/check'
+import { CheckIcon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'

 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
@ -22,7 +22,7 @@ const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
  >
    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuItemIndicator>
-        <RadixIconsCheck class="w-4 h-4" />
+        <CheckIcon class="w-4 h-4" />
      </DropdownMenuItemIndicator>
    </span>
    <slot />
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
@ -5,7 +5,7 @@ import {
  type DropdownMenuRadioItemEmits,
  type DropdownMenuRadioItemProps,
 } from 'radix-vue'
-import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
+import { DotFilledIcon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'

 const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()
@ -24,7 +24,7 @@ const emits = defineEmits<DropdownMenuRadioItemEmits>()
    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">

      <DropdownMenuItemIndicator>
-        <RadixIconsDotFilled class="h-4 w-4 fill-current" />
+        <DotFilledIcon class="h-4 w-4 fill-current" />
      </DropdownMenuItemIndicator>
    </span>
    <slot />
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@ -3,7 +3,7 @@ import {
  DropdownMenuSubTrigger,
  type DropdownMenuSubTriggerProps,
 } from 'radix-vue'
-import RadixIconsChevronRight from '~icons/radix-icons/chevron-right'
+import { ChevronRightIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'

 const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
@ -20,6 +20,6 @@ const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
    ]"
  >
    <slot />
-    <RadixIconsChevronRight class="ml-auto h-4 w-4" />
+    <ChevronRightIcon class="ml-auto h-4 w-4" />
  </DropdownMenuSubTrigger>
 </template>
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
@ -5,8 +5,8 @@ import {
  type MenubarCheckboxItemProps,
  MenubarItemIndicator,
 } from 'radix-vue'
+import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
-import RadixIconsCheck from '~icons/radix-icons/check'

 const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()

@ -28,7 +28,7 @@ const emit = defineEmits<MenubarCheckboxItemEmits>()
    <MenubarItemIndicator
      class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
    >
-      <RadixIconsCheck class="w-4 h-4" />
+      <CheckIcon class="w-4 h-4" />
    </MenubarItemIndicator>
    <slot />
  </MenubarCheckboxItem>
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
@ -5,8 +5,8 @@ import {
  type MenubarRadioItemEmits,
  type MenubarRadioItemProps,
 } from 'radix-vue'
+import { DotFilledIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
-import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'

 const props = defineProps<MenubarRadioItemProps & { class?: string }>()

@ -27,7 +27,7 @@ const emits = defineEmits<MenubarRadioItemEmits>()
    <MenubarItemIndicator
      class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
    >
-      <RadixIconsDotFilled class="h-4 w-4 fill-current" />
+      <DotFilledIcon class="h-4 w-4 fill-current" />
    </MenubarItemIndicator>

    <slot />
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
@ -3,8 +3,8 @@ import {
  NavigationMenuTrigger,
  type NavigationMenuTriggerProps,
 } from 'radix-vue'
+import { ChevronDownIcon } from '@radix-icons/vue'
 import { navigationMenuTriggerStyle } from '.'
-import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
 import { cn } from '@/lib/utils'

 const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
@ -16,7 +16,7 @@ const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
    v-bind="props"
  >
    <slot />
-    <RadixIconsChevronDown
+    <ChevronDownIcon
      class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
--- a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
@ -4,8 +4,8 @@ import {
  RadioGroupItem,
  type RadioGroupItemProps,
 } from 'radix-vue'
+import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
-import RadixIconsCheck from '~icons/radix-icons/check'

 const props = defineProps<RadioGroupItemProps & { class?: string }>()
 </script>
@ -23,7 +23,7 @@ const props = defineProps<RadioGroupItemProps & { class?: string }>()
    <RadioGroupIndicator
      :class="cn('flex items-center justify-center', props.class)"
    >
-      <RadixIconsCheck class="h-3.5 w-3.5 fill-primary" />
+      <CheckIcon class="h-3.5 w-3.5 fill-primary" />
    </RadioGroupIndicator>
  </RadioGroupItem>
 </template>
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
@ -5,8 +5,8 @@ import {
  type SelectItemProps,
  SelectItemText,
 } from 'radix-vue'
+import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
-import RadixIconsCheck from '~icons/radix-icons/check'

 const props = defineProps<SelectItemProps & { class?: string }>()
 </script>
@ -23,7 +23,7 @@ const props = defineProps<SelectItemProps & { class?: string }>()
  >
    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectItemIndicator>
-        <RadixIconsCheck class="h-4 w-4" />
+        <CheckIcon class="h-4 w-4" />
      </SelectItemIndicator>
    </span>

--- a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
-import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
+import { ChevronDownIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'

 const props = withDefaults(
@ -27,7 +27,7 @@ const props = withDefaults(
  >
    <slot />
    <SelectIcon as-child>
-      <RadixIconsChevronDown class="w-4 h-4 opacity-50" />
+      <ChevronDownIcon class="w-4 h-4 opacity-50" />
    </SelectIcon>
  </SelectTrigger>
 </template>
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
@ -8,7 +8,7 @@ import {
  DialogPortal,
 } from 'radix-vue'
 import { cva } from 'class-variance-authority'
-import RadixIconsCross2 from '~icons/radix-icons/cross-2'
+import { Cross2Icon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'

 interface SheetContentProps extends DialogContentProps {
@ -56,7 +56,7 @@ const sheetVariants = cva(
      <DialogClose
        class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
      >
-        <RadixIconsCross2 class="w-4 h-4 text-muted-foreground" />
+        <Cross2Icon class="w-4 h-4 text-muted-foreground" />
      </DialogClose>
    </DialogContent>
  </DialogPortal>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -53,6 +53,9 @@ importers:
      '@morev/vue-transitions':
        specifier: ^2.3.6
        version: 2.3.6(vue@3.3.4)
+      '@radix-icons/vue':
+        specifier: ^1.0.0
+        version: 1.0.0(vue@3.3.4)
      '@tanstack/vue-table':
        specifier: ^8.9.9
        version: 8.9.9(vue@3.3.4)
@ -1779,6 +1782,14 @@ packages:
    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
    dev: false

+  /@radix-icons/vue@1.0.0(vue@3.3.4):
+    resolution: {integrity: sha512-gKWWk9tTK/laDRRNe5KLLR8A0qUwx4q4+DN8Fq48hJ904u78R82ayAO3TrxbNLgyn2D0h6rRiGdLzQWj7rPcvA==}
+    peerDependencies:
+      vue: '>= 3'
+    dependencies:
+      vue: 3.3.4
+    dev: false
+
  /@rollup/pluginutils@5.0.4:
    resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==}
    engines: {node: '>=14.0.0'}