[fix] use cn() to avoid having to safelist icons

src/platform/assets/components/AssetBrowserModal.stories.ts

@@ -51,7 +51,7 @@ export const Default: Story = {
     nodeType: 'CheckpointLoaderSimple',
     inputName: 'ckpt_name',
     currentValue: '',
-    showLeftPanel: false
+    showLeftPanel: true
   },
   render: (args) => ({
     components: { AssetBrowserModal },
@@ -71,7 +71,7 @@ export const Default: Story = {
       }
     },
     template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-stone-200 p-4">
         <AssetBrowserModal
           :node-type="nodeType"
           :input-name="inputName"
@@ -112,7 +112,7 @@ export const SingleAssetType: Story = {
       return { ...args, onAssetSelect, onClose, assets: singleTypeAssets }
     },
     template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-stone-200 p-4">
         <AssetBrowserModal
           :node-type="nodeType"
           :input-name="inputName"
@@ -155,7 +155,7 @@ export const NoLeftPanel: Story = {
       return { ...args, onAssetSelect, onClose, assets: mockAssets }
     },
     template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-stone-200 p-4">
         <AssetBrowserModal
           :node-type="nodeType"
           :input-name="inputName"

src/platform/assets/components/AssetBrowserModal.vue

@@ -12,7 +12,7 @@
         :nav-items="availableCategories"
       >
         <template #header-icon>
-          <i-lucide:folder class="size-4" />
+          <div :class="cn('icon-[lucide--folder]', 'size-4')" />
         </template>
         <template #header-title>{{ $t('assetBrowser.browseAssets') }}</template>
       </LeftSidePanel>
@@ -46,6 +46,7 @@ import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { cn } from '@/utils/tailwindUtil'
 
 const props = defineProps<{
   nodeType?: string

src/platform/assets/components/AssetCard.vue

@@ -68,15 +68,15 @@
         "
       >
         <span v-if="asset.stats.stars" class="flex items-center gap-1">
-          <i-lucide:star class="size-3" />
+          <div :class="cn('icon-[lucide--star]', 'size-3')" />
           {{ asset.stats.stars }}
         </span>
         <span v-if="asset.stats.downloadCount" class="flex items-center gap-1">
-          <i-lucide:download class="size-3" />
+          <div :class="cn('icon-[lucide--download]', 'size-3')" />
           {{ asset.stats.downloadCount }}
         </span>
         <span v-if="asset.stats.formattedDate" class="flex items-center gap-1">
-          <i-lucide:clock class="size-3" />
+          <div :class="cn('icon-[lucide--clock]', 'size-3')" />
           {{ asset.stats.formattedDate }}
         </span>
       </div>

src/platform/assets/components/AssetFilterBar.vue

@@ -30,7 +30,7 @@
         @update:model-value="handleFilterChange"
       >
         <template #icon>
-          <i-lucide:arrow-up-down class="size-3" />
+          <div :class="cn('icon-[lucide--arrow-up-down]', 'size-3')" />
         </template>
       </SingleSelect>
     </div>

src/platform/assets/components/AssetGrid.vue

@@ -27,7 +27,7 @@
         )
       "
     >
-      <i-lucide:search class="size-10 mb-4" />
+      <div :class="cn('icon-[lucide--search]', 'size-10 mb-4')" />
       <h3 class="text-lg font-medium mb-2">
         {{ $t('assetBrowser.noAssetsFound') }}
       </h3>
@@ -39,9 +39,13 @@
       v-if="loading"
       class="col-span-full flex items-center justify-center py-16"
     >
-      <i-lucide:loader
+      <div
         :class="
-          cn('size-6 animate-spin', 'text-stone-300 dark-theme:text-stone-200')
+          cn(
+            'icon-[lucide--loader-circle]',
+            'size-6 animate-spin',
+            'text-stone-300 dark-theme:text-stone-200'
+          )
         "
       />
     </div>

tailwind.config.ts

@@ -6,16 +6,6 @@ import { iconCollection } from './build/customIconCollection'
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
 
-  safelist: [
-    'icon-[lucide--folder]',
-    'icon-[lucide--package]',
-    'icon-[lucide--image]',
-    'icon-[lucide--video]',
-    'icon-[lucide--box]',
-    'icon-[lucide--audio-waveform]',
-    'icon-[lucide--message-circle]'
-  ],
-
   plugins: [
     addDynamicIconSelectors({
       iconSets: {