fix: clean up unused icons and add LoadImage lucide icon override (#9359)

## Summary

Remove 46 unused snake_case SVG icons from design-system and use lucide
icon for LoadImage.

## Changes

- **What**: Remove unreferenced snake_case SVG files, replace LoadImage
custom icon with `lucide--image-up`, add `preview-image.svg` (renamed
from `image-preview.svg` to match `kebabCase('PreviewImage')`), extract
`ESSENTIALS_ICON_OVERRIDES` to `essentialsNodes.ts`
- Remove `load-image` from safelist in `style.css`

<img width="307" height="701" alt="image"
src="https://github.com/user-attachments/assets/de5e1bde-03eb-415e-ac76-f2e653a5eeb2"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9359-fix-clean-up-unused-icons-and-add-LoadImage-lucide-icon-override-3186d73d36508159be05ce6f4145be56)
by [Unito](https://www.unito.io)

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:
+ *   <i class="icon-s1-[lucide--settings]" />     <!-- stroke-width: 1 -->
+ *   <i class="icon-s1.5-[lucide--settings]" />   <!-- stroke-width: 1.5 -->
+ *   <i class="icon-s2.5-[lucide--settings]" />   <!-- stroke-width: 2.5 -->
+ *
+ * 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 {}
+        }
+      }
+    })
+  }
+})

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));