Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 10:42:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style: Standardize icon use Part 1 (#5947)

Browse Source 
## Summary

Remove the mix of class based and component style icons in favor of just
[classes](https://iconify.design/docs/usage/css/tailwind/tailwind4/#basic-usage).

## Changes

- **What**: Migrate existing lucide icons

## Review Focus

What differs between the icons before and now?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5947-Style-Standardize-icon-use-Part-1-2846d73d365081bfa66ceb6bdaa9ff02)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alexander Brown
2025-10-07 17:53:38 -07:00
committed by GitHub
parent 0616c049e4
commit 99b3a59679
60 changed files with 124 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/design-system/src/icons/README.md
View File

@@ -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>