chore: change usage of lucide icon in new-york

This commit is contained in:
zernonia 2023-11-09 18:36:40 +08:00
parent 6ccaecaf8a
commit 8d4912012b
12 changed files with 23 additions and 22 deletions

View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { AlertTriangle } from 'lucide-vue-next' import { AlertTriangle } from '@radix-icons/vue'
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert' import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
</script> </script>

View File

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ChevronRight } from 'lucide-vue-next' import { ChevronRightIcon } from '@radix-icons/vue'
import { Button } from '@/lib/registry/new-york/ui/button' import { Button } from '@/lib/registry/new-york/ui/button'
</script> </script>
<template> <template>
<Button variant="outline" size="icon"> <Button variant="outline" size="icon">
<ChevronRight class="w-4 h-4" /> <ChevronRightIcon class="w-4 h-4" />
</Button> </Button>
</template> </template>

View File

@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { Loader2 } from 'lucide-vue-next' import { ReloadIcon } from '@radix-icons/vue'
import { Button } from '@/lib/registry/new-york/ui/button' import { Button } from '@/lib/registry/new-york/ui/button'
</script> </script>
<template> <template>
<Button disabled> <Button disabled>
<Loader2 class="w-4 h-4 mr-2 animate-spin" /> <ReloadIcon class="w-4 h-4 mr-2 animate-spin" />
Please wait Please wait
</Button> </Button>
</template> </template>

View File

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { Mail } from 'lucide-vue-next' import { EnvelopeOpenIcon } from '@radix-icons/vue'
import { Button } from '@/lib/registry/new-york/ui/button' import { Button } from '@/lib/registry/new-york/ui/button'
</script> </script>
<template> <template>
<Button> <Button>
<Mail class="w-4 h-4 mr-2" /> Login with Email <EnvelopeOpenIcon class="w-4 h-4 mr-2" /> Login with Email
</Button> </Button>
</template> </template>

View File

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { Copy } from 'lucide-vue-next' import { CopyIcon } from '@radix-icons/vue'
import { Button } from '@/lib/registry/new-york/ui/button' import { Button } from '@/lib/registry/new-york/ui/button'
import { import {
Dialog, Dialog,
DialogClose,
DialogContent, DialogContent,
DialogDescription, DialogDescription,
DialogFooter, DialogFooter,
@ -41,7 +42,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
</div> </div>
<Button type="submit" size="sm" class="px-3"> <Button type="submit" size="sm" class="px-3">
<span class="sr-only">Copy</span> <span class="sr-only">Copy</span>
<Copy class="w-4 h-4" /> <CopyIcon class="w-4 h-4" />
</Button> </Button>
</div> </div>
<DialogFooter class="sm:justify-start"> <DialogFooter class="sm:justify-start">

View File

@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { Underline } from 'lucide-vue-next' import { UnderlineIcon } from '@radix-icons/vue'
import { Toggle } from '@/lib/registry/new-york/ui/toggle' import { Toggle } from '@/lib/registry/new-york/ui/toggle'
</script> </script>
<template> <template>
<Toggle aria-label="Toggle italic" disabled> <Toggle aria-label="Toggle italic" disabled>
<Underline class="w-4 h-4" /> <UnderlineIcon class="w-4 h-4" />
</Toggle> </Toggle>
</template> </template>

View File

@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { Italic } from 'lucide-vue-next' import { FontItalicIcon } from '@radix-icons/vue'
import { Toggle } from '@/lib/registry/new-york/ui/toggle' import { Toggle } from '@/lib/registry/new-york/ui/toggle'
</script> </script>
<template> <template>
<Toggle variant="outline" aria-label="Toggle italic"> <Toggle variant="outline" aria-label="Toggle italic">
<Italic class="w-4 h-4" /> <FontItalicIcon class="w-4 h-4" />
</Toggle> </Toggle>
</template> </template>

View File

@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { Italic } from 'lucide-vue-next' import { FontItalicIcon } from '@radix-icons/vue'
import { Toggle } from '@/lib/registry/new-york/ui/toggle' import { Toggle } from '@/lib/registry/new-york/ui/toggle'
</script> </script>
<template> <template>
<Toggle aria-label="Toggle italic"> <Toggle aria-label="Toggle italic">
<Italic class="w-4 h-4 mr-2" /> <FontItalicIcon class="w-4 h-4 mr-2" />
Italic Italic
</Toggle> </Toggle>
</template> </template>

View File

@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { Italic } from 'lucide-vue-next' import { FontItalicIcon } from '@radix-icons/vue'
import { Toggle } from '@/lib/registry/new-york/ui/toggle' import { Toggle } from '@/lib/registry/new-york/ui/toggle'
</script> </script>
<template> <template>
<Toggle size="lg" aria-label="Toggle italic"> <Toggle size="lg" aria-label="Toggle italic">
<Italic class="w-4 h-4" /> <FontItalicIcon class="w-4 h-4" />
</Toggle> </Toggle>
</template> </template>

View File

@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { Italic } from 'lucide-vue-next' import { FontItalicIcon } from '@radix-icons/vue'
import { Toggle } from '@/lib/registry/new-york/ui/toggle' import { Toggle } from '@/lib/registry/new-york/ui/toggle'
</script> </script>
<template> <template>
<Toggle size="sm" aria-label="Toggle italic"> <Toggle size="sm" aria-label="Toggle italic">
<Italic class="w-4 h-4" /> <FontItalicIcon class="w-4 h-4" />
</Toggle> </Toggle>
</template> </template>

View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ToastClose } from 'radix-vue' import { ToastClose } from 'radix-vue'
import { XIcon } from 'lucide-vue-next' import { Cross2Icon } from '@radix-icons/vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<{ const props = defineProps<{
@ -10,6 +10,6 @@ const props = defineProps<{
<template> <template>
<ToastClose v-bind="props" :class="cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)"> <ToastClose v-bind="props" :class="cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
<XIcon class="h-4 w-4" /> <Cross2Icon class="h-4 w-4" />
</ToastClose> </ToastClose>
</template> </template>

View File

@ -17,7 +17,7 @@
}, },
{ {
"name": "ToastClose.vue", "name": "ToastClose.vue",
"content": "<script setup lang=\"ts\">\nimport { ToastClose } from 'radix-vue'\nimport { XIcon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: string\n}>()\n</script>\n\n<template>\n <ToastClose v-bind=\"props\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n <XIcon class=\"h-4 w-4\" />\n </ToastClose>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { ToastClose } from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: string\n}>()\n</script>\n\n<template>\n <ToastClose v-bind=\"props\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n <Cross2Icon class=\"h-4 w-4\" />\n </ToastClose>\n</template>\n"
}, },
{ {
"name": "ToastDescription.vue", "name": "ToastDescription.vue",