diff --git a/eslint.config.ts b/eslint.config.ts index ba275976bc..083f373840 100644 --- a/eslint.config.ts +++ b/eslint.config.ts @@ -78,6 +78,7 @@ export default defineConfig([ 'src/scripts/*', 'src/types/generatedManagerTypes.ts', 'src/types/vue-shim.d.ts', + 'packages/design-system/src/css/lucideStrokePlugin.js', 'test-results/*', 'vitest.setup.ts' ] diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 90fd14609e..b919008772 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "@iconify-json/lucide": "catalog:", - "@iconify/tailwind4": "catalog:" + "@iconify/tailwind4": "catalog:", + "@iconify/utils": "catalog:" }, "devDependencies": { "tailwindcss": "catalog:", diff --git a/packages/design-system/src/css/lucideStrokePlugin.js b/packages/design-system/src/css/lucideStrokePlugin.js new file mode 100644 index 0000000000..ba16da101e --- /dev/null +++ b/packages/design-system/src/css/lucideStrokePlugin.js @@ -0,0 +1,71 @@ +import plugin from 'tailwindcss/plugin' +import { getIconsCSSData } from '@iconify/utils/lib/css/icons' +import { loadIconSet } from '@iconify/tailwind4/lib/helpers/loader.js' +import { matchIconName } from '@iconify/utils/lib/icon/name' + +/** + * Tailwind 4 plugin that provides lucide icon variants with configurable + * stroke-width via class prefix. + * + * Usage in CSS: + * @plugin "./lucideStrokePlugin.js"; + * + * Usage in templates: + * + * + * + * + * The default class remains stroke-width: 2. + */ + +const STROKE_WIDTHS = ['1', '1.3', '1.5', '2', '2.5'] + +const SCALE = 1.2 + +function getDynamicCSSRulesWithStroke(icon, strokeWidth) { + const nameParts = icon.split(/--|:/) + if (nameParts.length !== 2) { + throw new Error(`Invalid icon name: "${icon}"`) + } + const [prefix, name] = nameParts + if (!(prefix.match(matchIconName) && name.match(matchIconName))) { + throw new Error(`Invalid icon name: "${icon}"`) + } + const iconSet = loadIconSet(prefix) + if (!iconSet) { + throw new Error( + `Cannot load icon set for "${prefix}". Install "@iconify-json/${prefix}" as dev dependency?` + ) + } + const generated = getIconsCSSData(iconSet, [name], { + iconSelector: '.icon', + customise: (content) => + content.replaceAll('stroke-width="2"', `stroke-width="${strokeWidth}"`) + }) + if (generated.css.length !== 1) { + throw new Error(`Cannot find "${icon}". Bad icon name?`) + } + if (SCALE && generated.common?.rules) { + generated.common.rules.height = SCALE + 'em' + generated.common.rules.width = SCALE + 'em' + } + return { + ...generated.common?.rules, + ...generated.css[0].rules + } +} + +export default plugin(({ matchComponents }) => { + for (const sw of STROKE_WIDTHS) { + matchComponents({ + [`icon-s${sw}`]: (icon) => { + try { + return getDynamicCSSRulesWithStroke(icon, sw) + } catch (err) { + console.warn(err.message) + return {} + } + } + }) + } +}) diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css index 134478f133..9e5c45eea2 100644 --- a/packages/design-system/src/css/style.css +++ b/packages/design-system/src/css/style.css @@ -12,11 +12,13 @@ icon-sets: from-folder(comfy, './packages/design-system/src/icons'); } +@plugin "./lucideStrokePlugin.js"; + /* Safelist dynamic comfy icons for node library folders */ @source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow}]"); /* Safelist dynamic comfy icons for essential nodes (kebab-case of node names) */ -@source inline("icon-[comfy--{load-image,save-image,load-video,save-video,load-3-d,save-glb,image-batch,batch-images-node,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,lora-loader-model-only,primitive-string-multiline,get-video-components,video-slice,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,subgraph-blueprint-canny-to-video-ltx-2-0,subgraph-blueprint-pose-to-video-ltx-2-0}]"); +@source inline("icon-[comfy--{save-image,load-video,save-video,load-3-d,save-glb,image-batch,batch-images-node,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,lora-loader-model-only,primitive-string-multiline,get-video-components,video-slice,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,subgraph-blueprint-canny-to-video-ltx-2-0,subgraph-blueprint-pose-to-video-ltx-2-0,preview-image,image-and-mask-preview,layer-mask-mask-preview,mask-preview,image-preview-from-latent}]"); @custom-variant touch (@media (hover: none)); diff --git a/packages/design-system/src/icons/batch-images-node.svg b/packages/design-system/src/icons/batch-images-node.svg index 6c2c3913ba..727c3de251 100644 --- a/packages/design-system/src/icons/batch-images-node.svg +++ b/packages/design-system/src/icons/batch-images-node.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/design-system/src/icons/canny.svg b/packages/design-system/src/icons/canny.svg index 6bae945a26..d8e398b065 100644 --- a/packages/design-system/src/icons/canny.svg +++ b/packages/design-system/src/icons/canny.svg @@ -1,10 +1,3 @@ - - - - - - - - - + + diff --git a/packages/design-system/src/icons/canny_to_image.svg b/packages/design-system/src/icons/canny_to_image.svg deleted file mode 100644 index aaeb32d051..0000000000 --- a/packages/design-system/src/icons/canny_to_image.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/design-system/src/icons/compare_images.svg b/packages/design-system/src/icons/compare_images.svg deleted file mode 100644 index a1d8ad0e5a..0000000000 --- a/packages/design-system/src/icons/compare_images.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/design-system/src/icons/compare_videos.svg b/packages/design-system/src/icons/compare_videos.svg deleted file mode 100644 index 75ca914356..0000000000 --- a/packages/design-system/src/icons/compare_videos.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/design-system/src/icons/crop_video.svg b/packages/design-system/src/icons/crop_video.svg deleted file mode 100644 index d2d5508a01..0000000000 --- a/packages/design-system/src/icons/crop_video.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/design-system/src/icons/depth_to_image.svg b/packages/design-system/src/icons/depth_to_image.svg deleted file mode 100644 index d46ea269db..0000000000 --- a/packages/design-system/src/icons/depth_to_image.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/packages/design-system/src/icons/depth_to_video.svg b/packages/design-system/src/icons/depth_to_video.svg deleted file mode 100644 index 9edb63ecc2..0000000000 --- a/packages/design-system/src/icons/depth_to_video.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/packages/design-system/src/icons/edit_image.svg b/packages/design-system/src/icons/edit_image.svg deleted file mode 100644 index 6ccc96753e..0000000000 --- a/packages/design-system/src/icons/edit_image.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/edit_video.svg b/packages/design-system/src/icons/edit_video.svg deleted file mode 100644 index ecb0acb01e..0000000000 --- a/packages/design-system/src/icons/edit_video.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/design-system/src/icons/enhance.svg b/packages/design-system/src/icons/enhance.svg deleted file mode 100644 index 3a3534c2bd..0000000000 --- a/packages/design-system/src/icons/enhance.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/enhance_3dmodel.svg b/packages/design-system/src/icons/enhance_3dmodel.svg deleted file mode 100644 index e5d03491c3..0000000000 --- a/packages/design-system/src/icons/enhance_3dmodel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/design-system/src/icons/enhance_video.svg b/packages/design-system/src/icons/enhance_video.svg deleted file mode 100644 index 93ccad2cfa..0000000000 --- a/packages/design-system/src/icons/enhance_video.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/design-system/src/icons/image-and-mask-preview.svg b/packages/design-system/src/icons/image-and-mask-preview.svg new file mode 100644 index 0000000000..68eedea9f1 --- /dev/null +++ b/packages/design-system/src/icons/image-and-mask-preview.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/design-system/src/icons/image-batch.svg b/packages/design-system/src/icons/image-batch.svg index 6c2c3913ba..727c3de251 100644 --- a/packages/design-system/src/icons/image-batch.svg +++ b/packages/design-system/src/icons/image-batch.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/design-system/src/icons/image-invert.svg b/packages/design-system/src/icons/image-invert.svg index 98087cac3d..3281aa5d19 100644 --- a/packages/design-system/src/icons/image-invert.svg +++ b/packages/design-system/src/icons/image-invert.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/design-system/src/icons/image-preview-from-latent.svg b/packages/design-system/src/icons/image-preview-from-latent.svg new file mode 100644 index 0000000000..d3433c8738 --- /dev/null +++ b/packages/design-system/src/icons/image-preview-from-latent.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/design-system/src/icons/image-rotate.svg b/packages/design-system/src/icons/image-rotate.svg index d565dc6403..733f41913e 100644 --- a/packages/design-system/src/icons/image-rotate.svg +++ b/packages/design-system/src/icons/image-rotate.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/design-system/src/icons/image-scale.svg b/packages/design-system/src/icons/image-scale.svg index 09160d715f..a007ae5585 100644 --- a/packages/design-system/src/icons/image-scale.svg +++ b/packages/design-system/src/icons/image-scale.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/design-system/src/icons/image_captioning.svg b/packages/design-system/src/icons/image_captioning.svg deleted file mode 100644 index 38892dac13..0000000000 --- a/packages/design-system/src/icons/image_captioning.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/image_color_adjust.svg b/packages/design-system/src/icons/image_color_adjust.svg deleted file mode 100644 index 4ba7fa877e..0000000000 --- a/packages/design-system/src/icons/image_color_adjust.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/image_compositor.svg b/packages/design-system/src/icons/image_compositor.svg deleted file mode 100644 index 8d06c0427b..0000000000 --- a/packages/design-system/src/icons/image_compositor.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/image_depth.svg b/packages/design-system/src/icons/image_depth.svg deleted file mode 100644 index 076915dd87..0000000000 --- a/packages/design-system/src/icons/image_depth.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/packages/design-system/src/icons/image_iterator.svg b/packages/design-system/src/icons/image_iterator.svg deleted file mode 100644 index 6b53161d64..0000000000 --- a/packages/design-system/src/icons/image_iterator.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/image_normalmap.svg b/packages/design-system/src/icons/image_normalmap.svg deleted file mode 100644 index 177107bdc2..0000000000 --- a/packages/design-system/src/icons/image_normalmap.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/design-system/src/icons/image_pose.svg b/packages/design-system/src/icons/image_pose.svg deleted file mode 100644 index bdf23df3b0..0000000000 --- a/packages/design-system/src/icons/image_pose.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/packages/design-system/src/icons/image_shader.svg b/packages/design-system/src/icons/image_shader.svg deleted file mode 100644 index 10d623411c..0000000000 --- a/packages/design-system/src/icons/image_shader.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/design-system/src/icons/image_to_image.svg b/packages/design-system/src/icons/image_to_image.svg deleted file mode 100644 index 6491f5362b..0000000000 --- a/packages/design-system/src/icons/image_to_image.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/design-system/src/icons/image_to_layers.svg b/packages/design-system/src/icons/image_to_layers.svg deleted file mode 100644 index 43d9d2ac02..0000000000 --- a/packages/design-system/src/icons/image_to_layers.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/packages/design-system/src/icons/image_to_video.svg b/packages/design-system/src/icons/image_to_video.svg deleted file mode 100644 index 0052f1d308..0000000000 --- a/packages/design-system/src/icons/image_to_video.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/design-system/src/icons/inpaint_image.svg b/packages/design-system/src/icons/inpaint_image.svg deleted file mode 100644 index b3959fa2b3..0000000000 --- a/packages/design-system/src/icons/inpaint_image.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/design-system/src/icons/inpaint_video.svg b/packages/design-system/src/icons/inpaint_video.svg deleted file mode 100644 index 965bb3fcbd..0000000000 --- a/packages/design-system/src/icons/inpaint_video.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/design-system/src/icons/layer-mask-mask-preview.svg b/packages/design-system/src/icons/layer-mask-mask-preview.svg new file mode 100644 index 0000000000..84698c8048 --- /dev/null +++ b/packages/design-system/src/icons/layer-mask-mask-preview.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/design-system/src/icons/layers_to_image.svg b/packages/design-system/src/icons/layers_to_image.svg deleted file mode 100644 index 3e9dfb3a4b..0000000000 --- a/packages/design-system/src/icons/layers_to_image.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/packages/design-system/src/icons/load-3-d.svg b/packages/design-system/src/icons/load-3-d.svg index 2c6ea830e0..fa3b72b915 100644 --- a/packages/design-system/src/icons/load-3-d.svg +++ b/packages/design-system/src/icons/load-3-d.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/design-system/src/icons/load-audio.svg b/packages/design-system/src/icons/load-audio.svg index 8276d1a80f..85b89fea5f 100644 --- a/packages/design-system/src/icons/load-audio.svg +++ b/packages/design-system/src/icons/load-audio.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/design-system/src/icons/load-image.svg b/packages/design-system/src/icons/load-image.svg deleted file mode 100644 index 8da07a860d..0000000000 --- a/packages/design-system/src/icons/load-image.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/load-video.svg b/packages/design-system/src/icons/load-video.svg index 17cfbc6c13..18ad7b6a3c 100644 --- a/packages/design-system/src/icons/load-video.svg +++ b/packages/design-system/src/icons/load-video.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/design-system/src/icons/lora-loader-model-only.svg b/packages/design-system/src/icons/lora-loader-model-only.svg index d96f7d7a6e..aaa9b6301f 100644 --- a/packages/design-system/src/icons/lora-loader-model-only.svg +++ b/packages/design-system/src/icons/lora-loader-model-only.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/packages/design-system/src/icons/lora-loader.svg b/packages/design-system/src/icons/lora-loader.svg index d96f7d7a6e..aaa9b6301f 100644 --- a/packages/design-system/src/icons/lora-loader.svg +++ b/packages/design-system/src/icons/lora-loader.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/packages/design-system/src/icons/mask-preview.svg b/packages/design-system/src/icons/mask-preview.svg new file mode 100644 index 0000000000..9c4609bdfc --- /dev/null +++ b/packages/design-system/src/icons/mask-preview.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/design-system/src/icons/music_generation.svg b/packages/design-system/src/icons/music_generation.svg deleted file mode 100644 index 9df20c85f8..0000000000 --- a/packages/design-system/src/icons/music_generation.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/packages/design-system/src/icons/open-ai-chat-node.svg b/packages/design-system/src/icons/open-ai-chat-node.svg index 48b44236ab..7a6df566d4 100644 --- a/packages/design-system/src/icons/open-ai-chat-node.svg +++ b/packages/design-system/src/icons/open-ai-chat-node.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/design-system/src/icons/outpaint_image.svg b/packages/design-system/src/icons/outpaint_image.svg deleted file mode 100644 index 03e603f506..0000000000 --- a/packages/design-system/src/icons/outpaint_image.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/design-system/src/icons/painter.svg b/packages/design-system/src/icons/painter.svg deleted file mode 100644 index 2557a7d85e..0000000000 --- a/packages/design-system/src/icons/painter.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/pose_to_image.svg b/packages/design-system/src/icons/pose_to_image.svg deleted file mode 100644 index 05dc681f7d..0000000000 --- a/packages/design-system/src/icons/pose_to_image.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/design-system/src/icons/preview-image.svg b/packages/design-system/src/icons/preview-image.svg new file mode 100644 index 0000000000..d3433c8738 --- /dev/null +++ b/packages/design-system/src/icons/preview-image.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/design-system/src/icons/prompt_enhance.svg b/packages/design-system/src/icons/prompt_enhance.svg deleted file mode 100644 index e1265b9347..0000000000 --- a/packages/design-system/src/icons/prompt_enhance.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/recraft-remove-background-node.svg b/packages/design-system/src/icons/recraft-remove-background-node.svg index 51497b57c9..376468f19a 100644 --- a/packages/design-system/src/icons/recraft-remove-background-node.svg +++ b/packages/design-system/src/icons/recraft-remove-background-node.svg @@ -1,10 +1,3 @@ - - - - - - - - - + + diff --git a/packages/design-system/src/icons/resize_video.svg b/packages/design-system/src/icons/resize_video.svg deleted file mode 100644 index fe2b45be98..0000000000 --- a/packages/design-system/src/icons/resize_video.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/packages/design-system/src/icons/rotate_video.svg b/packages/design-system/src/icons/rotate_video.svg deleted file mode 100644 index 8c257ac9e2..0000000000 --- a/packages/design-system/src/icons/rotate_video.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/packages/design-system/src/icons/save-audio.svg b/packages/design-system/src/icons/save-audio.svg index 07360f8ab5..85e1a8e7a8 100644 --- a/packages/design-system/src/icons/save-audio.svg +++ b/packages/design-system/src/icons/save-audio.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/design-system/src/icons/save-glb.svg b/packages/design-system/src/icons/save-glb.svg index aa25867173..e99fadc824 100644 --- a/packages/design-system/src/icons/save-glb.svg +++ b/packages/design-system/src/icons/save-glb.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/design-system/src/icons/save-video.svg b/packages/design-system/src/icons/save-video.svg index edf324add6..66281ba2c0 100644 --- a/packages/design-system/src/icons/save-video.svg +++ b/packages/design-system/src/icons/save-video.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/design-system/src/icons/select_object.svg b/packages/design-system/src/icons/select_object.svg deleted file mode 100644 index 6f9532bcec..0000000000 --- a/packages/design-system/src/icons/select_object.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/packages/design-system/src/icons/stability-text-to-audio.svg b/packages/design-system/src/icons/stability-text-to-audio.svg index d642ece211..f42c97f148 100644 --- a/packages/design-system/src/icons/stability-text-to-audio.svg +++ b/packages/design-system/src/icons/stability-text-to-audio.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/packages/design-system/src/icons/stitch_videos.svg b/packages/design-system/src/icons/stitch_videos.svg deleted file mode 100644 index 0396bb1f6c..0000000000 --- a/packages/design-system/src/icons/stitch_videos.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/tencent-image-to-model-node.svg b/packages/design-system/src/icons/tencent-image-to-model-node.svg index d723246bf7..4d72442e19 100644 --- a/packages/design-system/src/icons/tencent-image-to-model-node.svg +++ b/packages/design-system/src/icons/tencent-image-to-model-node.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/design-system/src/icons/tencent-text-to-model-node.svg b/packages/design-system/src/icons/tencent-text-to-model-node.svg index 43fa9f0b25..3d0a1c874f 100644 --- a/packages/design-system/src/icons/tencent-text-to-model-node.svg +++ b/packages/design-system/src/icons/tencent-text-to-model-node.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/packages/design-system/src/icons/text_iterator.svg b/packages/design-system/src/icons/text_iterator.svg deleted file mode 100644 index 4b835d17cd..0000000000 --- a/packages/design-system/src/icons/text_iterator.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/text_to_image.svg b/packages/design-system/src/icons/text_to_image.svg deleted file mode 100644 index d4c61c765f..0000000000 --- a/packages/design-system/src/icons/text_to_image.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/design-system/src/icons/text_to_video.svg b/packages/design-system/src/icons/text_to_video.svg deleted file mode 100644 index 88ccdb9d18..0000000000 --- a/packages/design-system/src/icons/text_to_video.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/design-system/src/icons/trim_video.svg b/packages/design-system/src/icons/trim_video.svg deleted file mode 100644 index b8d842251e..0000000000 --- a/packages/design-system/src/icons/trim_video.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/design-system/src/icons/vectorize.svg b/packages/design-system/src/icons/vectorize.svg deleted file mode 100644 index 33fe18a847..0000000000 --- a/packages/design-system/src/icons/vectorize.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/video-slice.svg b/packages/design-system/src/icons/video-slice.svg index 7bca20f5cd..8a9f0d44e1 100644 --- a/packages/design-system/src/icons/video-slice.svg +++ b/packages/design-system/src/icons/video-slice.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/design-system/src/icons/video_canny.svg b/packages/design-system/src/icons/video_canny.svg deleted file mode 100644 index 4ecc9cc066..0000000000 --- a/packages/design-system/src/icons/video_canny.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/packages/design-system/src/icons/video_captioning.svg b/packages/design-system/src/icons/video_captioning.svg deleted file mode 100644 index ce63fe0774..0000000000 --- a/packages/design-system/src/icons/video_captioning.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design-system/src/icons/video_compositor.svg b/packages/design-system/src/icons/video_compositor.svg deleted file mode 100644 index 7b2bc2659b..0000000000 --- a/packages/design-system/src/icons/video_compositor.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/design-system/src/icons/video_depth.svg b/packages/design-system/src/icons/video_depth.svg deleted file mode 100644 index c169d21654..0000000000 --- a/packages/design-system/src/icons/video_depth.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/packages/design-system/src/icons/video_normal_map.svg b/packages/design-system/src/icons/video_normal_map.svg deleted file mode 100644 index 5fc4283699..0000000000 --- a/packages/design-system/src/icons/video_normal_map.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/design-system/src/icons/video_shaders.svg b/packages/design-system/src/icons/video_shaders.svg deleted file mode 100644 index 8d8d7bc1de..0000000000 --- a/packages/design-system/src/icons/video_shaders.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/packages/design-system/src/icons/voice_clone.svg b/packages/design-system/src/icons/voice_clone.svg deleted file mode 100644 index 83b8062884..0000000000 --- a/packages/design-system/src/icons/voice_clone.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 87f683ef13..cf64e83106 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,6 +24,9 @@ catalogs: '@iconify/tailwind4': specifier: ^1.2.0 version: 1.2.1 + '@iconify/utils': + specifier: ^3.1.0 + version: 3.1.0 '@intlify/eslint-plugin-vue-i18n': specifier: ^4.1.1 version: 4.1.1 @@ -850,6 +853,9 @@ importers: '@iconify/tailwind4': specifier: 'catalog:' version: 1.2.1(tailwindcss@4.2.0) + '@iconify/utils': + specifier: 'catalog:' + version: 3.1.0 devDependencies: tailwindcss: specifier: 'catalog:' diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index fe1ee970fe..afbf8ae1f8 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -9,6 +9,7 @@ catalog: '@iconify-json/lucide': ^1.1.178 '@iconify/json': ^2.2.380 '@iconify/tailwind4': ^1.2.0 + '@iconify/utils': ^3.1.0 '@intlify/eslint-plugin-vue-i18n': ^4.1.1 '@lobehub/i18n-cli': ^1.26.1 '@nx/eslint': 22.5.2 diff --git a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.test.ts b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.test.ts index f34d84a4ba..bd0f6af5b0 100644 --- a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.test.ts +++ b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.test.ts @@ -89,22 +89,22 @@ describe('EssentialNodeCard', () => { }) describe('icon generation', () => { - it('should use kebab-case of node name for icon', () => { + it('should use override icon for LoadImage', () => { const wrapper = mountComponent(createMockNode({ name: 'LoadImage' })) const icon = wrapper.find('i') - expect(icon.classes()).toContain('icon-[comfy--load-image]') + expect(icon.classes()).toContain('icon-s1.3-[lucide--image-up]') }) - it('should use kebab-case for SaveImage', () => { + it('should use override icon for SaveImage', () => { const wrapper = mountComponent(createMockNode({ name: 'SaveImage' })) const icon = wrapper.find('i') - expect(icon.classes()).toContain('icon-[comfy--save-image]') + expect(icon.classes()).toContain('icon-s1.3-[lucide--image-down]') }) - it('should use kebab-case for ImageCrop', () => { + it('should use override icon for ImageCrop', () => { const wrapper = mountComponent(createMockNode({ name: 'ImageCrop' })) const icon = wrapper.find('i') - expect(icon.classes()).toContain('icon-[comfy--image-crop]') + expect(icon.classes()).toContain('icon-s1.3-[lucide--crop]') }) it('should use kebab-case for complex node names', () => { diff --git a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue index b681daba82..6e4ef2afcd 100644 --- a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue +++ b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue @@ -1,6 +1,6 @@
-
- -
+ {{ node.label }} @@ -41,6 +39,7 @@ import { computed, inject } from 'vue' import TextTickerMultiLine from '@/components/common/TextTickerMultiLine.vue' import NodePreviewCard from '@/components/node/NodePreviewCard.vue' import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag' +import { ESSENTIALS_ICON_OVERRIDES } from '@/constants/essentialsNodes' import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore' import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes' import { cn } from '@/utils/tailwindUtil' @@ -72,6 +71,8 @@ const { const nodeIcon = computed(() => { const nodeName = node.data?.name + if (nodeName && nodeName in ESSENTIALS_ICON_OVERRIDES) + return ESSENTIALS_ICON_OVERRIDES[nodeName] const iconName = nodeName ? kebabCase(nodeName) : 'node' return `icon-[comfy--${iconName}]` }) diff --git a/src/constants/essentialsNodes.ts b/src/constants/essentialsNodes.ts index 9dae955621..07afc8d9c2 100644 --- a/src/constants/essentialsNodes.ts +++ b/src/constants/essentialsNodes.ts @@ -6,6 +6,17 @@ * Source: https://www.notion.so/comfy-org/2fe6d73d365080d0a951d14cdf540778 */ +export const ESSENTIALS_ICON_OVERRIDES: Record = { + LoadImage: 'icon-s1.3-[lucide--image-up]', + LoadImageOutput: 'icon-s1.3-[lucide--image-up]', + SaveImage: 'icon-s1.3-[lucide--image-down]', + PrimitiveStringMultiline: 'icon-s1.3-[lucide--text]', + ImageCrop: 'icon-s1.3-[lucide--crop]', + VideoCrop: 'icon-s1.3-[lucide--crop]', + KlingLipSyncAudioToVideoNode: 'icon-s1.3-[lucide--mic-vocal]', + WebcamCapture: 'icon-s1.3-[lucide--camera]' +} + export const ESSENTIALS_CATEGORIES = [ 'basics', 'text generation',