refactor: replace iconify icons with @radix-icons/vue for newyork s…

…tyle (#87) * refactor: changes all instance of unplugin-icons to radix-icons * chore: build registry * test: fix new deps
unovue · Sep 27, 2023 · 02fe76d · 02fe76d
1 parent 88c159d
commit 02fe76d
Show file tree

Hide file tree

Showing 53 changed files with 147 additions and 224 deletions.
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
@@ -415,6 +415,27 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/TypographyTable.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/TypographyTable.vue'],
     },
+    ActivityGoal: {
+      name: 'ActivityGoal',
+      type: 'components:example',
+      registryDependencies: ['button', 'card', 'themes', 'config'],
+      component: () => import('../src/lib/registry/default/example/ActivityGoal.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ActivityGoal.vue'],
+    },
+    DataTable: {
+      name: 'DataTable',
+      type: 'components:example',
+      registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'],
+      component: () => import('../src/lib/registry/default/example/DataTable.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DataTable.vue'],
+    },
+    Metric: {
+      name: 'Metric',
+      type: 'components:example',
+      registryDependencies: ['card', 'config'],
+      component: () => import('../src/lib/registry/default/example/Metric.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/Metric.vue'],
+    },
   },
   'new-york': {
     AccordionDemo: {
@@ -830,5 +851,26 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/TypographyTable.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/TypographyTable.vue'],
     },
+    ActivityGoal: {
+      name: 'ActivityGoal',
+      type: 'components:example',
+      registryDependencies: ['button', 'card', 'themes', 'config'],
+      component: () => import('../src/lib/registry/new-york/example/ActivityGoal.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ActivityGoal.vue'],
+    },
+    DataTable: {
+      name: 'DataTable',
+      type: 'components:example',
+      registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'],
+      component: () => import('../src/lib/registry/new-york/example/DataTable.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DataTable.vue'],
+    },
+    Metric: {
+      name: 'Metric',
+      type: 'components:example',
+      registryDependencies: ['card', 'config'],
+      component: () => import('../src/lib/registry/new-york/example/Metric.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/Metric.vue'],
+    },
   },
 }
diff --git 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",

diff --git 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">

diff --git a/apps/www/src/lib/registry/default/example/Cards/index.vue b/apps/www/src/lib/registry/default/example/Cards/index.vue
diff --git 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>

diff --git 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 />

diff --git 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>
diff --git 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>
 

diff --git 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.

diff --git 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>

diff --git 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>

diff --git 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">