Style: Standardize icon use Part 1

.storybook/README.md

@@ -211,18 +211,17 @@ This Storybook setup includes:
 
 ## Icon Usage in Storybook
 
-In this project, the `<i-lucide:... />` syntax from unplugin-icons is not supported in Storybook.  
+In this project, only the `<i class="icon-[lucide--folder]" />` syntax from unplugin-icons is supported in Storybook.  
 
 **Example:**
 
 ```vue
 <script setup lang="ts">
-import { Trophy, Settings } from 'lucide-vue-next'
 </script>
 
 <template>
-  <Trophy :size="16" class="text-neutral" />
-  <Settings :size="16" class="text-neutral" />
+  <i class="icon-[lucide--trophy] text-neutral size-4" />
+  <i class="icon-[lucide--settings] text-neutral size-4" />
 </template>
 ```
 

CONTRIBUTING.md

@@ -255,7 +255,7 @@ pnpm format
 The project supports three types of icons, all with automatic imports (no manual imports needed):
 
 1. **PrimeIcons** - Built-in PrimeVue icons using CSS classes: `<i class="pi pi-plus" />`
-2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-mdi:folder />`
+2. **Iconify Icons** - 200,000+ icons from various libraries: `<i class="icon-[lucide--settings]" />`, `<i class="icon-[mdi--folder]" />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
 
 Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation.

apps/desktop-ui/src/components/install/GpuPicker.vue

@@ -53,7 +53,7 @@
           :value="$t('install.gpuPicker.recommended')"
           class="bg-neutral-300 text-neutral-900 rounded-full text-sm font-bold px-2 py-[1px]"
         />
-        <i-lucide:badge-check class="text-neutral-300 text-lg" />
+        <i class="icon-[lucide--badge-check] text-neutral-300 text-lg" />
       </div>
     </div>
 

packages/design-system/src/icons/README.md

@@ -26,9 +26,9 @@ ComfyUI supports three types of icons that can be used throughout the interface.
 ```vue
 <template>
   <!-- Primary icon set: Lucide -->
-  <i-lucide:download />
-  <i-lucide:settings />
-  <i-lucide:workflow class="text-2xl" />
+  <i class="icon-[lucide--download]" />
+  <i class="icon-[lucide--settings]" />
+  <i class="icon-[lucide--workflow]" class="text-2xl" />
 
   <!-- Other popular icon sets -->
   <i-mdi:folder-open />
@@ -41,7 +41,7 @@ ComfyUI supports three types of icons that can be used throughout the interface.
   <!-- Carbon Icons -->
 
   <!-- With styling -->
-  <i-lucide:save class="w-6 h-6 text-blue-500" />
+  <i class="icon-[lucide--save]" class="w-6 h-6 text-blue-500" />
 </template>
 ```
 
@@ -77,7 +77,7 @@ ComfyUI supports three types of icons that can be used throughout the interface.
   <!-- Iconify/Custom in button (template) -->
   <Button>
     <template #icon>
-      <i-lucide:save />
+      <i class="icon-[lucide--save]" />
     </template>
     Save File
   </Button>
@@ -88,8 +88,8 @@ ComfyUI supports three types of icons that can be used throughout the interface.
 
 ```vue
 <template>
-  <i-lucide:eye v-if="isVisible" />
-  <i-lucide:eye-off v-else />
+  <i class="icon-[lucide--eye]" v-if="isVisible" />
+  <i class="icon-[lucide--eye-off]" v-else />
 
   <!-- Or with ternary -->
   <component :is="isLocked ? 'i-lucide:lock' : 'i-lucide:lock-open'" />
@@ -100,7 +100,7 @@ ComfyUI supports three types of icons that can be used throughout the interface.
 
 ```vue
 <template>
-  <i-lucide:info
+  <i class="icon-[lucide--info]"
     v-tooltip="'Click for more information'"
     class="cursor-pointer"
   />
@@ -174,20 +174,20 @@ No imports needed - icons are auto-discovered!
 ```vue
 <template>
   <!-- Size with Tailwind classes -->
-  <i-lucide:plus class="w-4 h-4" />
+  <i class="icon-[lucide--plus]" class="w-4 h-4" />
   <!-- 16px -->
-  <i-lucide:plus class="w-6 h-6" />
+  <i class="icon-[lucide--plus]" class="w-6 h-6" />
   <!-- 24px (default) -->
-  <i-lucide:plus class="w-8 h-8" />
+  <i class="icon-[lucide--plus]" class="w-8 h-8" />
   <!-- 32px -->
 
   <!-- Or text size -->
-  <i-lucide:plus class="text-sm" />
-  <i-lucide:plus class="text-2xl" />
+  <i class="icon-[lucide--plus]" class="text-sm" />
+  <i class="icon-[lucide--plus]" class="text-2xl" />
 
   <!-- Colors -->
-  <i-lucide:check class="text-green-500" />
-  <i-lucide:x class="text-red-500" />
+  <i class="icon-[lucide--check]" class="text-green-500" />
+  <i class="icon-[lucide--x]" class="text-red-500" />
 </template>
 ```
 
@@ -219,7 +219,7 @@ Always use `currentColor` in SVGs for automatic theme adaptation:
   <!-- After -->
   <Button>
     <template #icon>
-      <i-lucide:download />
+      <i class="icon-[lucide--download]" />
     </template>
   </Button>
 </template>

packages/design-system/tailwind.config.ts

@@ -4,22 +4,13 @@ import { addDynamicIconSelectors } from '@iconify/tailwind'
 import { iconCollection } from './src/iconCollection'
 
 export default {
-  content: [],
-  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: {
         comfy: iconCollection,
         lucide
       },
+      scale: 1.2,
       prefix: 'icon'
     })
   ]

src/components/actionbar/ComfyQueueButton.vue

@@ -16,10 +16,16 @@
       @click="queuePrompt"
     >
       <template #icon>
-        <i-lucide:list-start v-if="workspaceStore.shiftDown" />
-        <i-lucide:play v-else-if="queueMode === 'disabled'" />
-        <i-lucide:fast-forward v-else-if="queueMode === 'instant'" />
-        <i-lucide:step-forward v-else-if="queueMode === 'change'" />
+        <i v-if="workspaceStore.shiftDown" class="icon-[lucide--list-start]" />
+        <i v-else-if="queueMode === 'disabled'" class="icon-[lucide--play]" />
+        <i
+          v-else-if="queueMode === 'instant'"
+          class="icon-[lucide--fast-forward]"
+        />
+        <i
+          v-else-if="queueMode === 'change'"
+          class="icon-[lucide--step-forward]"
+        />
       </template>
       <template #item="{ item }">
         <Button

src/components/button/MoreButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative inline-flex items-center">
     <IconButton @click="toggle">
-      <i-lucide:more-vertical class="text-sm" />
+      <i class="icon-[lucide--more-vertical] text-sm" />
     </IconButton>
 
     <Popover

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -29,7 +29,7 @@
           @click="resetFilters"
         >
           <template #icon>
-            <i-lucide:filter-x />
+            <i class="icon-[lucide--filter-x]" />
           </template>
         </IconTextButton>
       </div>
@@ -49,7 +49,7 @@
           :show-clear-button="true"
         >
           <template #icon>
-            <i-lucide:cpu />
+            <i class="icon-[lucide--cpu]" />
           </template>
         </MultiSelect>
 
@@ -63,7 +63,7 @@
           :show-clear-button="true"
         >
           <template #icon>
-            <i-lucide:target />
+            <i class="icon-[lucide--target]" />
           </template>
         </MultiSelect>
 
@@ -77,7 +77,7 @@
           :show-clear-button="true"
         >
           <template #icon>
-            <i-lucide:file-text />
+            <i class="icon-[lucide--file-text]" />
           </template>
         </MultiSelect>
 
@@ -90,7 +90,7 @@
             class="min-w-[270px]"
           >
             <template #icon>
-              <i-lucide:arrow-up-down />
+              <i class="icon-[lucide--arrow-up-down]" />
             </template>
           </SingleSelect>
         </div>
@@ -111,7 +111,7 @@
         v-if="!isLoading && filteredTemplates.length === 0"
         class="flex flex-col items-center justify-center h-64 text-neutral-500"
       >
-        <i-lucide:search class="w-12 h-12 mb-4 opacity-50" />
+        <i class="icon-[lucide--search] w-12 h-12 mb-4 opacity-50" />
         <p class="text-lg mb-2">
           {{ $t('templateWorkflows.noResults', 'No templates found') }}
         </p>

src/components/graph/GraphCanvasMenu.vue

@@ -25,7 +25,7 @@
         @click="() => commandStore.execute('Comfy.Canvas.Unlock')"
       >
         <template #icon>
-          <i-lucide:mouse-pointer-2 />
+          <i class="icon-[lucide--mouse-pointer-2]" />
         </template>
       </Button>
 
@@ -39,7 +39,7 @@
         @click="() => commandStore.execute('Comfy.Canvas.Lock')"
       >
         <template #icon>
-          <i-lucide:hand />
+          <i class="icon-[lucide--hand]" />
         </template>
       </Button>
 
@@ -56,7 +56,7 @@
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
         <template #icon>
-          <i-lucide:focus />
+          <i class="icon-[lucide--focus]" />
         </template>
       </Button>
 
@@ -73,7 +73,7 @@
       >
         <span class="inline-flex text-xs">
           <span>{{ canvasStore.appScalePercentage }}%</span>
-          <i-lucide:chevron-down />
+          <i class="icon-[lucide--chevron-down]" />
         </span>
       </Button>
 
@@ -90,7 +90,7 @@
         @click="() => commandStore.execute('Workspace.ToggleFocusMode')"
       >
         <template #icon>
-          <i-lucide:lightbulb />
+          <i class="icon-[lucide--lightbulb]" />
         </template>
       </Button>
 
@@ -111,7 +111,7 @@
         @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
       >
         <template #icon>
-          <i-lucide:route-off />
+          <i class="icon-[lucide--route-off]" />
         </template>
       </Button>
     </ButtonGroup>

src/components/graph/selectionToolbox/BypassButton.vue

@@ -11,7 +11,7 @@
     @click="toggleBypass"
   >
     <template #icon>
-      <i-lucide:ban class="w-4 h-4" />
+      <i class="icon-[lucide--ban] w-4 h-4" />
     </template>
   </Button>
 </template>

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -11,7 +11,7 @@
     @click="() => commandStore.execute('Comfy.Graph.UnpackSubgraph')"
   >
     <template #icon>
-      <i-lucide:expand class="w-4 h-4" />
+      <i class="icon-[lucide--expand] w-4 h-4" />
     </template>
   </Button>
   <Button
@@ -26,7 +26,7 @@
     @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
   >
     <template #icon>
-      <i-lucide:shrink />
+      <i class="icon-[lucide--shrink]" />
     </template>
   </Button>
 </template>

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -10,7 +10,7 @@
     @mouseleave="() => handleMouseLeave()"
     @click="handleClick"
   >
-    <i-lucide:play class="fill-path-white w-4 h-4" />
+    <i class="icon-[lucide--play] fill-path-white w-4 h-4" />
   </Button>
 </template>
 

src/components/graph/selectionToolbox/FrameNodes.vue

@@ -9,7 +9,7 @@
     severity="secondary"
     @click="frameNodes"
   >
-    <i-lucide:frame class="w-4 h-4" />
+    <i class="icon-[lucide--frame] w-4 h-4" />
   </Button>
 </template>
 

src/components/graph/selectionToolbox/InfoButton.vue

@@ -9,7 +9,7 @@
     severity="secondary"
     @click="toggleHelp"
   >
-    <i-lucide:info class="w-4 h-4" />
+    <i class="icon-[lucide--info] w-4 h-4" />
   </Button>
 </template>
 

src/components/graph/selectionToolbox/MenuOptionItem.vue

@@ -14,10 +14,10 @@
     <span v-if="option.shortcut" class="text-xs opacity-60">
       {{ option.shortcut }}
     </span>
-    <i-lucide:chevron-right
+    <i
       v-if="option.hasSubmenu"
       :size="14"
-      class="opacity-60"
+      class="icon-[lucide--chevron-right] opacity-60"
     />
     <Badge
       v-if="option.badge"

src/components/graph/selectionToolbox/NodeOptionsButton.vue

@@ -11,7 +11,7 @@
     severity="secondary"
     @click="handleClick"
   >
-    <i-lucide:more-vertical class="w-4 h-4" />
+    <i class="icon-[lucide--more-vertical] w-4 h-4" />
   </Button>
 </template>
 

src/components/graph/selectionToolbox/RefreshSelectionButton.vue

@@ -7,7 +7,7 @@
     data-testid="refresh-button"
     @click="refreshSelected"
   >
-    <i-lucide:refresh-cw class="w-4 h-4" />
+    <i class="icon-[lucide--refresh-cw] w-4 h-4" />
   </Button>
 </template>
 

src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue

@@ -10,7 +10,7 @@
     @click="() => commandStore.execute('Comfy.PublishSubgraph')"
   >
     <template #icon>
-      <i-lucide:book-open />
+      <i class="icon-[lucide--book-open]" />
     </template>
   </Button>
 </template>

src/components/graph/selectionToolbox/SubmenuPopover.vue

@@ -32,9 +32,9 @@
           :style="{ backgroundColor: subOption.color }"
         />
         <template v-else-if="!subOption.color">
-          <i-lucide:check
+          <i
             v-if="isShapeSelected(subOption)"
-            class="w-4 h-4 flex-shrink-0"
+            class="icon-[lucide--check] w-4 h-4 flex-shrink-0"
           />
           <div v-else class="w-4 flex-shrink-0" />
           <span>{{ subOption.label }}</span>