feat: change libraly icons

app/layouts/admin.vue

@@ -1,14 +1,4 @@
 <script setup lang="ts">
-import {
-  Film,
-  Home,
-  LogOut,
-  Menu,
-  Settings,
-  Users,
-  X,
-} from 'lucide-vue-next'
-
 const route = useRoute()
 const router = useRouter()
 const sidebarOpen = ref(false)
@@ -18,10 +8,10 @@ const { data: user } = await useFetch('/api/auth/me', {
 })
 
 const navItems = [
-  { label: 'Dashboard', icon: Home, to: '/admin' },
-  { label: 'Phim', icon: Film, to: '/admin/phim' },
-  { label: 'Thành viên', icon: Users, to: '/admin/thanh-vien' },
-  { label: 'Cài đặt', icon: Settings, to: '/admin/cai-dat' },
+  { label: 'Dashboard', icon: 'home' as const, to: '/admin' },
+  { label: 'Phim', icon: 'film' as const, to: '/admin/phim' },
+  { label: 'Thành viên', icon: 'users' as const, to: '/admin/thanh-vien' },
+  { label: 'Cài đặt', icon: 'settings' as const, to: '/admin/cai-dat' },
 ]
 
 function isActive(to: string) {
@@ -50,13 +40,13 @@ const displayInitial = computed(() => displayName.value.charAt(0).toUpperCase())
       <div class="flex h-16 items-center justify-between border-b border-white/10 px-4">
         <NuxtLink to="/admin" class="flex items-center gap-2">
           <div class="grid size-8 place-items-center rounded-lg bg-yellow-400">
-            <Film class="size-4 text-slate-950" />
+            <AppIcon name="film" class="size-4 text-slate-950" />
           </div>
           <span class="text-lg font-black text-white">CineK Admin</span>
         </NuxtLink>
         <button type="button" class="grid size-8 place-items-center rounded-lg text-white hover:bg-white/10 lg:hidden"
           @click="closeSidebar">
-          <X class="size-5" />
+          <AppIcon name="x" class="size-5" />
         </button>
       </div>
 
@@ -66,7 +56,7 @@ const displayInitial = computed(() => displayName.value.charAt(0).toUpperCase())
           :class="isActive(item.to)
             ? 'bg-yellow-400/10 text-yellow-400'
             : 'text-slate-300 hover:bg-white/5 hover:text-white'">
-          <component :is="item.icon" class="size-5" />
+          <AppIcon :name="item.icon" class="size-5" />
           {{ item.label }}
         </NuxtLink>
       </nav>
@@ -74,13 +64,13 @@ const displayInitial = computed(() => displayName.value.charAt(0).toUpperCase())
       <div class="absolute inset-x-0 bottom-0 space-y-1 border-t border-white/10 p-4">
         <NuxtLink to="/"
           class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-semibold text-slate-300 transition hover:bg-white/5 hover:text-white">
-          <Home class="size-5" />
+          <AppIcon name="home" class="size-5" />
           Về trang chủ
         </NuxtLink>
         <button type="button"
           class="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-semibold text-red-400 transition hover:bg-red-400/10"
           @click="handleLogout">
-          <LogOut class="size-5" />
+          <AppIcon name="log-out" class="size-5" />
           Đăng xuất
         </button>
       </div>
@@ -91,7 +81,7 @@ const displayInitial = computed(() => displayName.value.charAt(0).toUpperCase())
         class="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-white/10 bg-slate-950/80 px-4 backdrop-blur-xl lg:px-6">
         <button type="button" class="grid size-10 place-items-center rounded-lg text-white hover:bg-white/10 lg:hidden"
           @click="sidebarOpen = true">
-          <Menu class="size-5" />
+          <AppIcon name="menu" class="size-5" />
         </button>
 
         <div class="ml-auto flex items-center gap-3">