From e8bc61475bf28e852e29605668622d51c34acabb Mon Sep 17 00:00:00 2001
From: Arjan Singh <arjan@comfy.org>
Date: Tue, 16 Sep 2025 12:29:02 -0700
Subject: [PATCH] [fix] i love lucide

---
 src/platform/assets/components/AssetCard.vue       |  6 +++---
 src/platform/assets/components/AssetFilterBar.vue  |  7 +------
 src/platform/assets/components/AssetGrid.vue       |  8 ++++----
 src/platform/assets/composables/useAssetBrowser.ts |  4 ++--
 tailwind.config.ts                                 | 10 ++++++++++
 5 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 89621b8acd..a0008f90e7 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -67,15 +67,15 @@
         "
       >
         <span v-if="asset.stats.stars" class="flex items-center gap-1">
-          <i class="pi pi-star text-xs"></i>
+          <i-lucide:star class="size-3" />
           {{ asset.stats.stars }}
         </span>
         <span v-if="asset.stats.downloadCount" class="flex items-center gap-1">
-          <i class="pi pi-download text-xs"></i>
+          <i-lucide:download class="size-3" />
           {{ asset.stats.downloadCount }}
         </span>
         <span v-if="asset.stats.formattedDate" class="flex items-center gap-1">
-          <i class="pi pi-clock text-xs"></i>
+          <i-lucide:clock class="size-3" />
           {{ asset.stats.formattedDate }}
         </span>
       </div>
diff --git a/src/platform/assets/components/AssetFilterBar.vue b/src/platform/assets/components/AssetFilterBar.vue
index 66dbe9c45a..1f3295b439 100644
--- a/src/platform/assets/components/AssetFilterBar.vue
+++ b/src/platform/assets/components/AssetFilterBar.vue
@@ -1,8 +1,6 @@
 <template>
   <div :class="containerClasses" data-component-id="asset-filter-bar">
-    <!-- Left Side Filters -->
     <div :class="leftSideClasses" data-component-id="asset-filter-bar-left">
-      <!-- File Format MultiSelect -->
       <MultiSelect
         v-model="fileFormats"
         label="File formats"
@@ -12,7 +10,6 @@
         @update:model-value="handleFilterChange"
       />
 
-      <!-- Base Model MultiSelect -->
       <MultiSelect
         v-model="baseModels"
         label="Base models"
@@ -23,9 +20,7 @@
       />
     </div>
 
-    <!-- Right Side Sort -->
     <div :class="rightSideClasses" data-component-id="asset-filter-bar-right">
-      <!-- Sort SingleSelect -->
       <SingleSelect
         v-model="sortBy"
         label="Sort by"
@@ -35,7 +30,7 @@
         @update:model-value="handleFilterChange"
       >
         <template #icon>
-          <i class="icon-[lucide--arrow-up-down] size-3" />
+          <i-lucide:arrow-up-down class="size-3" />
         </template>
       </SingleSelect>
     </div>
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index 6d43cd23b1..4b0f715025 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -29,7 +29,7 @@
         )
       "
     >
-      <i class="pi pi-search text-4xl mb-4"></i>
+      <i-lucide:search class="size-10 mb-4" />
       <h3 class="text-lg font-medium mb-2">
         {{ $t('assetBrowser.noAssetsFound') }}
       </h3>
@@ -41,15 +41,15 @@
       v-if="loading"
       class="col-span-full flex items-center justify-center py-16"
     >
-      <i
+      <i-lucide:loader
         :class="
           cn(
-            'pi pi-spinner pi-spin text-2xl',
+            'size-6 animate-spin',
             'text-stone-300',
             'dark-theme:text-stone-200'
           )
         "
-      ></i>
+      />
     </div>
   </div>
 </template>
diff --git a/src/platform/assets/composables/useAssetBrowser.ts b/src/platform/assets/composables/useAssetBrowser.ts
index 5c0d8ead2c..8e3c3b76a8 100644
--- a/src/platform/assets/composables/useAssetBrowser.ts
+++ b/src/platform/assets/composables/useAssetBrowser.ts
@@ -100,13 +100,13 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
     })
 
     return [
-      { id: 'all', label: 'All Models', icon: 'i-lucide:folder' },
+      { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
       ...Array.from(categorySet)
         .sort()
         .map((category) => ({
           id: category,
           label: category.charAt(0).toUpperCase() + category.slice(1),
-          icon: 'i-lucide:package'
+          icon: 'icon-[lucide--package]'
         }))
     ]
   })
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e5e39987be..98c7c4ea04 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,6 +6,16 @@ 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: {