Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-27 09:45:13 +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

4
src/renderer/extensions/minimap/MiniMap.vue
View File

@@ -28,7 +28,7 @@
@click.stop="toggleOptionsPanel"
>
<template #icon>
<i-lucide:settings-2 />
<i class="icon-[lucide--settings-2]" />
</template>
</Button>
<Button
@@ -40,7 +40,7 @@
@click.stop="() => commandStore.execute('Comfy.Canvas.ToggleMinimap')"
>
<template #icon>
<i-lucide:x />
<i class="icon-[lucide--x]" />
</template>
</Button>

10
src/renderer/extensions/minimap/MiniMapPanel.vue
View File

@@ -13,7 +13,7 @@
(value) => $emit('updateOption', 'Comfy.Minimap.NodeColors', value)
"
/>
<i-lucide:palette />
<i class="icon-[lucide--palette]" />
<label for="node-colors">{{ $t('minimap.nodeColors') }}</label>
</div>
@@ -27,7 +27,7 @@
(value) => $emit('updateOption', 'Comfy.Minimap.ShowLinks', value)
"
/>
<i-lucide:route />
<i class="icon-[lucide--route]" />
<label for="show-links">{{ $t('minimap.showLinks') }}</label>
</div>
@@ -41,7 +41,7 @@
(value) => $emit('updateOption', 'Comfy.Minimap.ShowGroups', value)
"
/>
<i-lucide:frame />
<i class="icon-[lucide--frame]" />
<label for="show-groups">{{ $t('minimap.showGroups') }}</label>
</div>
@@ -56,7 +56,7 @@
$emit('updateOption', 'Comfy.Minimap.RenderBypassState', value)
"
/>
<i-lucide:circle-slash-2 />
<i class="icon-[lucide--circle-slash-2]" />
<label for="render-bypass">{{ $t('minimap.renderBypassState') }}</label>
</div>
@@ -71,7 +71,7 @@
$emit('updateOption', 'Comfy.Minimap.RenderErrorState', value)
"
/>
<i-lucide:message-circle-warning />
<i class="icon-[lucide--message-circle-warning]" />
<label for="render-error">{{ $t('minimap.renderErrorState') }}</label>
</div>
</div>

6
src/renderer/extensions/vueNodes/VideoPreview.vue
View File

@@ -19,7 +19,7 @@
v-if="videoError"
class="w-full h-[352px] flex flex-col items-center justify-center text-white text-center bg-gray-800/50"
>
<i-lucide:video-off class="w-12 h-12 mb-2 text-gray-400" />
<i class="icon-[lucide--video-off] w-12 h-12 mb-2 text-gray-400" />
<p class="text-sm text-gray-300">{{ $t('g.videoFailedToLoad') }}</p>
<p class="text-xs text-gray-400 mt-1">
{{ getVideoFilename(currentVideoUrl) }}
@@ -54,7 +54,7 @@
:aria-label="$t('g.downloadVideo')"
@click="handleDownload"
>
<i-lucide:download class="w-4 h-4" />
<i class="icon-[lucide--download] w-4 h-4" />
</button>
<!-- Close Button -->
@@ -64,7 +64,7 @@
:aria-label="$t('g.removeVideo')"
@click="handleRemove"
>
<i-lucide:x class="w-4 h-4" />
<i class="icon-[lucide--x] w-4 h-4" />
</button>
</div>

8
src/renderer/extensions/vueNodes/components/ImagePreview.vue
View File

@@ -19,7 +19,7 @@
v-if="imageError"
class="w-full h-[352px] flex flex-col items-center justify-center text-white text-center bg-gray-800/50"
>
<i-lucide:image-off class="w-12 h-12 mb-2 text-gray-400" />
<i class="icon-[lucide--image-off] w-12 h-12 mb-2 text-gray-400" />
<p class="text-sm text-gray-300">{{ $t('g.imageFailedToLoad') }}</p>
<p class="text-xs text-gray-400 mt-1">
{{ getImageFilename(currentImageUrl) }}
@@ -53,7 +53,7 @@
:aria-label="$t('g.editOrMaskImage')"
@click="handleEditMask"
>
<i-lucide:venetian-mask class="w-4 h-4" />
<i class="icon-[lucide--venetian-mask] w-4 h-4" />
</button>
<!-- Download Button -->
@@ -63,7 +63,7 @@
:aria-label="$t('g.downloadImage')"
@click="handleDownload"
>
<i-lucide:download class="w-4 h-4" />
<i class="icon-[lucide--download] w-4 h-4" />
</button>
<!-- Close Button -->
@@ -73,7 +73,7 @@
:aria-label="$t('g.removeImage')"
@click="handleRemove"
>
<i-lucide:x class="w-4 h-4" />
<i class="icon-[lucide--x] w-4 h-4" />
</button>
</div>

4
src/renderer/extensions/vueNodes/components/NodeHeader.vue
View File

@@ -50,9 +50,9 @@
@edit="handleTitleEdit"
@cancel="handleTitleCancel"
/>
<i-lucide:pin
<i
v-if="isPinned"
class="size-5 text-node-component-header-icon"
class="icon-[lucide--pin] size-5 text-node-component-header-icon"
data-testid="node-pin-indicator"
/>
</div>

4
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
View File

@@ -73,7 +73,7 @@ const theButtonStyle = computed(() =>
{{ selectedItems.map((item) => (item as any)?.name).join(', ') }}
</span>
</span>
<i-lucide:chevron-down :class="chevronClass" />
<i class="icon-[lucide--chevron-down]" :class="chevronClass" />
</button>
<!-- Open File -->
<label
@@ -86,7 +86,7 @@ const theButtonStyle = computed(() =>
)
"
>
<i-lucide:folder-search class="size-4" />
<i class="icon-[lucide--folder-search] size-4" />
<input
type="file"
class="opacity-0 absolute inset-0 -z-1"

4
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
View File

@@ -73,9 +73,9 @@ const searchQuery = defineModel<string>('searchQuery')
v-if="items.length === 0"
class="flex justify-center items-center absolute inset-0"
>
<i-lucide:circle-off
<i
title="No items"
class="size-30 text-zinc-500/20"
class="icon-[lucide--circle-off] size-30 text-zinc-500/20"
/>
</div>
<!-- Item -->

17
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
View File

@@ -56,11 +56,11 @@ function handleSortSelected(item: SortOption) {
)
"
>
<i-lucide:loader-circle
<i
v-if="isQuerying"
class="mr-2 size-4 animate-spin"
class="icon-[lucide--loader-circle] mr-2 size-4 animate-spin"
/>
<i-lucide:search v-else class="mr-2 size-4" />
<i v-else class="icon-[lucide--search] mr-2 size-4" />
<input
v-model="searchQuery"
type="text"
@@ -87,7 +87,7 @@ function handleSortSelected(item: SortOption) {
v-if="sortSelected !== 'default'"
class="size-2 absolute top-[-2px] left-[-2px] bg-blue-500 rounded-full"
/>
<i-lucide:arrow-up-down class="size-4" />
<i class="icon-[lucide--arrow-up-down] size-4" />
</button>
<!-- Sort Popover -->
<Popover
@@ -127,7 +127,10 @@ function handleSortSelected(item: SortOption) {
@click="handleSortSelected(item)"
>
<span>{{ item.name }}</span>
<i-lucide:check v-if="sortSelected === item.id" class="size-4" />
<i
v-if="sortSelected === item.id"
class="icon-[lucide--check] size-4"
/>
</button>
</div>
</Popover>
@@ -153,7 +156,7 @@ function handleSortSelected(item: SortOption) {
"
@click="layoutMode = 'list'"
>
<i-lucide:list class="size-4" />
<i class="icon-[lucide--list] size-4" />
</button>
<button
:class="
@@ -167,7 +170,7 @@ function handleSortSelected(item: SortOption) {
"
@click="layoutMode = 'grid'"
>
<i-lucide:layout-grid class="size-4" />
<i class="icon-[lucide--layout-grid] size-4" />
</button>
</div>
</div>

4
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
View File

@@ -93,7 +93,9 @@ function handleVideoLoad(event: Event) {
v-if="selected"
class="rounded-full bg-blue-500 border-1 border-white size-4 absolute top-1 left-1"
>
<i-lucide:check class="size-3 text-white -translate-y-[0.5px]" />
<i
class="icon-[lucide--check] size-3 text-white -translate-y-[0.5px]"
/>
</div>
<video
v-if="mediaSrc && isVideo"