abckit 0.0.9 → 0.0.11

package/dist/module.mjs

@@ -212,7 +212,6 @@ export {}
     excludeSet.add("zod");
     excludeSet.add("date-fns");
     excludeSet.add("date-fns/locale");
-    excludeSet.add("lucide-vue-next");
     excludeSet.add("class-variance-authority");
     excludeSet.add("reka-ui");
     excludeSet.add("clsx");

package/dist/runtime/components/app/AppBreadcrumbs.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useAppConfig, useRoute } from "#app";
+import { useAppConfig } from "#app";
 import { NuxtLink } from "#components";
 import { useBreadcrumbItems } from "abckit/composables/useBreadcrumbItems";
 import {
@@ -11,7 +11,6 @@ import {
   BreadcrumbSeparator
 } from "abckit/shadcn/breadcrumb";
 import { computed } from "vue";
-const route = useRoute();
 const appConfig = useAppConfig();
 const breadcrumbConfig = computed(() => appConfig.breadcrumbs || {});
 const baseUrl = computed(() => {

package/dist/runtime/components/app/AppHeader.vue

@@ -1,6 +1,6 @@
 <script setup>
+import { Icon } from "#components";
 import { SidebarMenuButton, useSidebar } from "abckit/shadcn/sidebar";
-import { Shield } from "lucide-vue-next";
 const props = defineProps({
   tenant: { type: Object, required: false }
 });
@@ -13,7 +13,7 @@ const { state } = useSidebar();
     class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
   >
     <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-      <Shield class="h-4 w-4" />
+      <Icon name="lucide:shield" class="h-4 w-4" />
     </div>
     <div
       v-show="state !== 'collapsed'"

package/dist/runtime/components/app/AppNavMain.d.vue.ts

@@ -1,9 +1,8 @@
-import type { LucideIcon } from 'lucide-vue-next';
 type __VLS_Props = {
     items: {
         title: string;
         url: string;
-        icon?: LucideIcon;
+        icon?: string;
         isActive?: boolean;
         items?: {
             title: string;

package/dist/runtime/components/app/AppNavMain.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { Icon } from "#components";
 import {
   Collapsible,
   CollapsibleContent,
@@ -14,7 +15,6 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem
 } from "abckit/shadcn/sidebar";
-import { ChevronRight } from "lucide-vue-next";
 defineProps({
   items: { type: Array, required: true },
   label: { type: String, required: false }
@@ -38,7 +38,7 @@ defineProps({
           <template v-if="!item.items">
             <SidebarMenuButton as-child :tooltip="item.title">
               <NuxtLink :to="item.url">
-                <component :is="item.icon" v-if="item.icon" />
+                <Icon v-if="item.icon" :name="item.icon" />
                 <span>{{ item.title }}</span>
               </NuxtLink>
             </SidebarMenuButton>
@@ -46,9 +46,9 @@ defineProps({
           <template v-else>
             <CollapsibleTrigger as-child>
               <SidebarMenuButton :tooltip="item.title">
-                <component :is="item.icon" v-if="item.icon" />
+                <Icon v-if="item.icon" :name="item.icon" />
                 <span>{{ item.title }}</span>
-                <ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                <Icon name="lucide:chevron-right" class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
               </SidebarMenuButton>
             </CollapsibleTrigger>
             <CollapsibleContent>

package/dist/runtime/components/app/AppNavMain.vue.d.ts

@@ -1,9 +1,8 @@
-import type { LucideIcon } from 'lucide-vue-next';
 type __VLS_Props = {
     items: {
         title: string;
         url: string;
-        icon?: LucideIcon;
+        icon?: string;
         isActive?: boolean;
         items?: {
             title: string;

package/dist/runtime/components/ui/accordion/AccordionTrigger.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronDown } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   AccordionHeader,
   AccordionTrigger
@@ -28,7 +28,8 @@ const delegatedProps = reactiveOmit(props, "class");
     >
       <slot />
       <slot name="icon">
-        <ChevronDown
+        <Icon
+          name="lucide:chevron-down"
           class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
         />
       </slot>

package/dist/runtime/components/ui/auto-form/AutoFormFieldArray.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { Button } from "abckit/shadcn/button";
 import { FormItem, FormMessage } from "abckit/shadcn/form";
-import { PlusIcon, TrashIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import { FieldArray, FieldContextKey, useField } from "vee-validate";
 import { computed, provide } from "vue";
 import * as z from "zod";
@@ -95,7 +95,7 @@ function getEmptyValueForZodType(schema) {
                   class="h-8 w-8 p-0 text-destructive hover:text-destructive"
                   @click="remove(index)"
                 >
-                  <TrashIcon :size="14" />
+                  <Icon name="lucide:trash" class="size-3.5" />
                 </Button>
               </div>
               
@@ -116,7 +116,7 @@ function getEmptyValueForZodType(schema) {
             :disabled="disabled"
             @click="push(getEmptyValueForZodType(itemShape?.schema))"
           >
-            <PlusIcon :size="16" />
+            <Icon name="lucide:plus" class="size-4" />
             {{ `Add ${beautifyObjectName(fieldName.replace(/s$/, ""))}` }}
           </Button>
         </div>

package/dist/runtime/components/ui/auto-form/AutoFormFieldDate.vue

@@ -5,7 +5,7 @@ import { Calendar } from "abckit/shadcn/calendar";
 import { FormControl, FormDescription, FormField, FormItem, FormMessage } from "abckit/shadcn/form";
 import { Popover, PopoverContent, PopoverTrigger } from "abckit/shadcn/popover";
 import { DateFormatter, getLocalTimeZone } from "@internationalized/date";
-import { CalendarIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import AutoFormLabel from "./AutoFormLabel.vue";
 import { beautifyObjectName, maybeBooleanishToBoolean } from "./utils";
 defineProps({
@@ -38,7 +38,7 @@ const df = new DateFormatter("en-US", {
   !slotProps.componentField.modelValue && 'text-muted-foreground'
 )"
                 >
-                  <CalendarIcon class="mr-2 h-4 w-4" />
+                  <Icon name="lucide:calendar" class="mr-2 h-4 w-4" />
                   {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : "Pick a date" }}
                 </Button>
               </PopoverTrigger>

package/dist/runtime/components/ui/auto-form/AutoFormFieldFile.vue

@@ -2,7 +2,7 @@
 import { Button } from "abckit/shadcn/button";
 import { FormControl, FormDescription, FormField, FormItem, FormMessage } from "abckit/shadcn/form";
 import { Input } from "abckit/shadcn/input";
-import { Trash } from "lucide-vue-next";
+import { Icon } from "#components";
 import { ref } from "vue";
 import AutoFormLabel from "./AutoFormLabel.vue";
 import { beautifyObjectName } from "./utils";
@@ -63,7 +63,7 @@ async function parseFileAsString(file) {
   slotProps.componentField.onInput(void 0);
 }"
             >
-              <Trash />
+              <Icon name="lucide:trash" />
             </Button>
           </div>
         </slot>

package/dist/runtime/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { MoreHorizontal } from "lucide-vue-next";
+import { Icon } from "#components";
 import { cn } from "abckit/utils";
 const props = defineProps({
   class: { type: null, required: false }
@@ -14,7 +14,7 @@ const props = defineProps({
     :class="cn('flex size-9 items-center justify-center', props.class)"
   >
     <slot>
-      <MoreHorizontal class="size-4" />
+      <Icon name="lucide:more-horizontal" class="size-4" />
     </slot>
     <span class="sr-only">More</span>
   </span>

package/dist/runtime/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ChevronRight } from "lucide-vue-next";
+import { Icon } from "#components";
 import { cn } from "abckit/utils";
 const props = defineProps({
   class: { type: null, required: false }
@@ -14,7 +14,7 @@ const props = defineProps({
     :class="cn('[&>svg]:size-3.5', props.class)"
   >
     <slot>
-      <ChevronRight />
+      <Icon name="lucide:chevron-right" />
     </slot>
   </li>
 </template>

package/dist/runtime/components/ui/calendar/CalendarNextButton.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronRight } from "lucide-vue-next";
+import { Icon } from "#components";
 import { CalendarNext, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 import { buttonVariants } from "abckit/shadcn/button";
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
   >
     <slot>
-      <ChevronRight class="size-4" />
+      <Icon name="lucide:chevron-right" class="size-4" />
     </slot>
   </CalendarNext>
 </template>

package/dist/runtime/components/ui/calendar/CalendarPrevButton.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronLeft } from "lucide-vue-next";
+import { Icon } from "#components";
 import { CalendarPrev, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 import { buttonVariants } from "abckit/shadcn/button";
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
   >
     <slot>
-      <ChevronLeft class="size-4" />
+      <Icon name="lucide:chevron-left" class="size-4" />
     </slot>
   </CalendarPrev>
 </template>

package/dist/runtime/components/ui/carousel/CarouselNext.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ArrowRight } from "lucide-vue-next";
+import { Icon } from "#components";
 import { cn } from "abckit/utils";
 import { Button } from "abckit/shadcn/button";
 import { useCarousel } from "./useCarousel";
@@ -25,7 +25,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel();
     @click="scrollNext"
   >
     <slot>
-      <ArrowRight />
+      <Icon name="lucide:arrow-right" />
       <span class="sr-only">Next Slide</span>
     </slot>
   </Button>

package/dist/runtime/components/ui/carousel/CarouselPrevious.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ArrowLeft } from "lucide-vue-next";
+import { Icon } from "#components";
 import { cn } from "abckit/utils";
 import { Button } from "abckit/shadcn/button";
 import { useCarousel } from "./useCarousel";
@@ -25,7 +25,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel();
     @click="scrollPrev"
   >
     <slot>
-      <ArrowLeft />
+      <Icon name="lucide:arrow-left" />
       <span class="sr-only">Previous Slide</span>
     </slot>
   </Button>

package/dist/runtime/components/ui/checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Check } from "lucide-vue-next";
+import { Icon } from "#components";
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
 import { cn } from "abckit/utils";
 const props = defineProps({
@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       class="grid place-content-center text-current transition-none"
     >
       <slot v-bind="slotProps">
-        <Check class="size-3.5" />
+        <Icon name="lucide:check" class="size-3.5" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>

package/dist/runtime/components/ui/combobox/ComboboxInput.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { SearchIcon } from "lucide-vue-next";
+import { Icon } from "#components";
 import { ComboboxInput, useForwardPropsEmits } from "reka-ui";
 import { cn } from "abckit/utils";
 defineOptions({
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     data-slot="command-input-wrapper"
     class="flex h-9 items-center gap-2 border-b px-3"
   >
-    <SearchIcon class="size-4 shrink-0 opacity-50" />
+    <Icon name="lucide:search" class="size-4 shrink-0 opacity-50" />
     <ComboboxInput
       data-slot="command-input"
       :class="cn(

package/dist/runtime/components/ui/command/CommandInput.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Search } from "lucide-vue-next";
+import { Icon } from "#components";
 import { ListboxFilter, useForwardProps } from "reka-ui";
 import { cn } from "abckit/utils";
 import { useCommand } from ".";
@@ -25,7 +25,7 @@ const { filterState } = useCommand();
     data-slot="command-input-wrapper"
     class="flex h-9 items-center gap-2 border-b px-3"
   >
-    <Search class="size-4 shrink-0 opacity-50" />
+    <Icon name="lucide:search" class="size-4 shrink-0 opacity-50" />
     <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
       v-model="filterState.search"

package/dist/runtime/components/ui/context-menu/ContextMenuCheckboxItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Check } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   ContextMenuCheckboxItem,
   ContextMenuItemIndicator,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
         <slot name="indicator-icon">
-          <Check class="size-4" />
+          <Icon name="lucide:check" class="size-4" />
         </slot>
       </ContextMenuItemIndicator>
     </span>

package/dist/runtime/components/ui/context-menu/ContextMenuRadioItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Circle } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
         <slot name="indicator-icon">
-          <Circle class="size-2 fill-current" />
+          <Icon name="lucide:circle" class="size-2 fill-current" />
         </slot>
       </ContextMenuItemIndicator>
     </span>

package/dist/runtime/components/ui/context-menu/ContextMenuSubTrigger.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronRight } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   ContextMenuSubTrigger,
   useForwardProps
@@ -29,6 +29,6 @@ const forwardedProps = useForwardProps(delegatedProps);
 )"
   >
     <slot />
-    <ChevronRight class="ml-auto" />
+    <Icon name="lucide:chevron-right" class="ml-auto" />
   </ContextMenuSubTrigger>
 </template>

package/dist/runtime/components/ui/dialog/DialogContent.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { X } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   DialogClose,
   DialogContent,
@@ -45,7 +45,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         data-slot="dialog-close"
         class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
       >
-        <X />
+        <Icon name="lucide:x" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>

package/dist/runtime/components/ui/dialog/DialogScrollContent.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { X } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   DialogClose,
   DialogContent,
@@ -50,7 +50,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         <DialogClose
           class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
-          <X class="w-4 h-4" />
+          <Icon name="lucide:x" class="w-4 h-4" />
           <span class="sr-only">Close</span>
         </DialogClose>
       </DialogContent>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Check } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   DropdownMenuCheckboxItem,
   DropdownMenuItemIndicator,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <slot name="indicator-icon">
-          <Check class="size-4" />
+          <Icon name="lucide:check" class="size-4" />
         </slot>
       </DropdownMenuItemIndicator>
     </span>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { Circle } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <slot name="indicator-icon">
-          <Circle class="size-2 fill-current" />
+          <Icon name="lucide:circle" class="size-2 fill-current" />
         </slot>
       </DropdownMenuItemIndicator>
     </span>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { ChevronRight } from "lucide-vue-next";
+import { Icon } from "#components";
 import {
   DropdownMenuSubTrigger,
   useForwardProps
@@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps);
 )"
   >
     <slot />
-    <ChevronRight class="ml-auto size-4" />
+    <Icon name="lucide:chevron-right" class="ml-auto size-4" />
   </DropdownMenuSubTrigger>
 </template>

package/dist/runtime/components/ui/file/FileEmptyState.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Cloud, Trash2 } from "lucide-vue-next";
+import { Icon } from "#components";
 const props = defineProps({
   searchQuery: { type: String, required: false, default: "" },
   isTrash: { type: Boolean, required: false, default: false },
@@ -22,7 +22,7 @@ function handleUploadClick() {
       class="relative rounded-full bg-muted p-8 mb-4 cursor-pointer transition-transform hover:scale-105"
       @click="handleUploadClick"
     >
-      <Cloud class="h-16 w-16 text-muted-foreground" />
+      <Icon name="lucide:cloud" class="h-16 w-16 text-muted-foreground" />
       <input
         v-if="!onUploadClick"
         type="file"
@@ -32,7 +32,7 @@ function handleUploadClick() {
       />
     </div>
     <div v-else-if="!searchQuery" class="rounded-full bg-muted p-8 mb-4">
-      <Trash2 class="h-16 w-16 text-muted-foreground" />
+      <Icon name="lucide:trash-2" class="h-16 w-16 text-muted-foreground" />
     </div>
     <div v-else class="rounded-full bg-muted p-8 mb-4">
       <Icon name="lucide:search-x" class="h-16 w-16 text-muted-foreground" />

package/dist/runtime/components/ui/file/FileGrid.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { Cloud, FileText, Film, Folder, Image } from "lucide-vue-next";
 import { bytesToSize } from "abckit/shared/constants/r2";
 import { AppImage } from "abckit/components/app";
+import { Icon } from "#components";
 const props = defineProps({
   files: { type: Array, required: true },
   selectedFiles: { type: Set, required: false },
@@ -11,13 +11,13 @@ const props = defineProps({
 });
 const emit = defineEmits(["select", "folderClick"]);
 const FILE_TYPE_ICONS = {
-  IMAGE: Image,
-  VIDEO: Film,
-  AUDIO: FileText,
-  DOCUMENT: FileText,
-  ARCHIVE: Cloud,
-  OTHER: Cloud,
-  FOLDER: Folder
+  IMAGE: "lucide:image",
+  VIDEO: "lucide:film",
+  AUDIO: "lucide:file-text",
+  DOCUMENT: "lucide:file-text",
+  ARCHIVE: "lucide:cloud",
+  OTHER: "lucide:cloud",
+  FOLDER: "lucide:folder"
 };
 function getFileIcon(file) {
   if (file.isFolder)
@@ -70,8 +70,8 @@ function isSelected(fileId) {
           fallback=""
         />
         <div v-else class="flex h-full items-center justify-center">
-          <component
-            :is="getFileIcon(file)"
+          <Icon
+            :name="getFileIcon(file)"
             class="h-12 w-12 text-muted-foreground"
           />
         </div>

package/dist/runtime/components/ui/file/FileTable.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { Cloud, Download, Eye, FileText, Film, Folder, Image, MoreVertical, RotateCcw, Trash2 } from "lucide-vue-next";
 import { bytesToSize } from "abckit/shared/constants/r2";
 import { Badge } from "abckit/shadcn/badge";
 import { Button } from "abckit/shadcn/button";
@@ -28,13 +27,13 @@ const props = defineProps({
   onPermanentDelete: { type: Function, required: false }
 });
 const FILE_TYPE_ICONS = {
-  IMAGE: Image,
-  VIDEO: Film,
-  AUDIO: FileText,
-  DOCUMENT: FileText,
-  ARCHIVE: Cloud,
-  OTHER: Cloud,
-  FOLDER: Folder
+  IMAGE: "lucide:image",
+  VIDEO: "lucide:film",
+  AUDIO: "lucide:file-text",
+  DOCUMENT: "lucide:file-text",
+  ARCHIVE: "lucide:cloud",
+  OTHER: "lucide:cloud",
+  FOLDER: "lucide:folder"
 };
 const FILE_TYPE_LABELS = {
   IMAGE: "Image",
@@ -125,9 +124,9 @@ const someSelected = computed(
                   class="h-full w-full"
                   fallback=""
                 />
-                <component
-                  :is="getFileIcon(file)"
+                <Icon
                   v-else
+                  :name="getFileIcon(file)"
                   class="h-5 w-5 text-muted-foreground"
                 />
               </div>
@@ -157,7 +156,7 @@ const someSelected = computed(
                   class="h-8 w-8"
                   @click.stop
                 >
-                  <MoreVertical class="h-4 w-4" />
+                  <Icon name="lucide:more-vertical" class="h-4 w-4" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
@@ -181,17 +180,17 @@ const someSelected = computed(
                       class="text-destructive focus:text-destructive"
                       @click.stop="onDelete(file)"
                     >
-                      <Trash2 class="mr-2 h-4 w-4" />
+                      <Icon name="lucide:trash-2" class="mr-2 h-4 w-4" />
                       Sil
                     </DropdownMenuItem>
                   </template>
                   <template v-else>
                     <DropdownMenuItem v-if="onView" @click.stop="onView(file)">
-                      <Eye class="mr-2 h-4 w-4" />
+                      <Icon name="lucide:eye" class="mr-2 h-4 w-4" />
                       Görüntüle
                     </DropdownMenuItem>
                     <DropdownMenuItem v-if="onDownload" @click.stop="onDownload(file)">
-                      <Download class="mr-2 h-4 w-4" />
+                      <Icon name="lucide:download" class="mr-2 h-4 w-4" />
                       İndir
                     </DropdownMenuItem>
                     <DropdownMenuItem v-if="onRename" @click.stop="onRename(file)">
@@ -208,14 +207,14 @@ const someSelected = computed(
                       class="text-destructive focus:text-destructive"
                       @click.stop="onDelete(file)"
                     >
-                      <Trash2 class="mr-2 h-4 w-4" />
+                      <Icon name="lucide:trash-2" class="mr-2 h-4 w-4" />
                       Çöp Kutusuna Taşı
                     </DropdownMenuItem>
                   </template>
                 </template>
                 <template v-else>
                   <DropdownMenuItem v-if="onRestore" @click.stop="onRestore(file)">
-                    <RotateCcw class="mr-2 h-4 w-4" />
+                    <Icon name="lucide:rotate-ccw" class="mr-2 h-4 w-4" />
                     Geri Yükle
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
@@ -224,7 +223,7 @@ const someSelected = computed(
                     class="text-destructive focus:text-destructive"
                     @click.stop="onDelete(file)"
                   >
-                    <Trash2 class="mr-2 h-4 w-4" />
+                    <Icon name="lucide:trash-2" class="mr-2 h-4 w-4" />
                     Kalıcı Olarak Sil
                   </DropdownMenuItem>
                 </template>