Iconify icons for Open Flow

This project installs the full @iconify/json package and uses UnoCSS for UI icons. Search the installed JSON files and use an existing icon. Do not draw custom SVGs, write SVG paths, construct CSS icons, or generate icon images. Existing custom icons are not a precedent for adding new ones.

Search local data

Paths below are relative to the repository root. The full collection data lives in packages/open-flow/node_modules/@iconify/json/json/<collection>.json, with collection information in packages/open-flow/node_modules/@iconify/json/collections.json. Use the installed data as the source of truth; no HTTP API or browser is needed.

Search JSON keys in icons and aliases, rather than dumping SVG bodies into context. For example, run from packages/open-flow:

bun -e '
const data = await Bun.file("node_modules/@iconify/json/json/lucide.json").json();
for (const name of [...Object.keys(data.icons), ...Object.keys(data.aliases ?? {})]) {
  if (/flow|connection|minimap/i.test(name)) console.log(`i-lucide-light:${name}`);
}
'

Prefer Lucide for new or replaced UI icons. Use the project's lucide-light collection with stroke width 1.5, not the default lucide collection with stroke width 2. It uses the same icon keys as the installed lucide.json; search that file and emit i-lucide-light:<name>. When using an existing lucide-react component, explicitly set strokeWidth={1.5}. Search other installed collections only when Lucide has no suitable icon or the user specifies another collection. Keep icons within the same control group visually consistent in stroke weight, proportions, and apparent size; nearby legacy icons do not override the Lucide preference. Try related English keywords when an exact search is sparse. Read only the selected candidates and their alias parents for SVG inspection; use @iconify/utils to resolve aliases when rendering previews locally. Compare stroke weight, proportions, and appearance at the intended size, not just icon names. Choose verification using the repository verification principles.

Use through UnoCSS

Use the collection prefix and exact icon key to form a complete class:

<i aria-hidden="true" className="i-lucide-light:workflow" />

Write the complete class literally in source so UnoCSS can discover it. Do not assemble it from fragments at runtime. Keep accessible names on icon-only buttons.

packages/open-flow/src/build/node/designerUnoConfig.ts configures UnoCSS to resolve collections from the owning workspace. The full package supports other collections without adding individual @iconify-json/* packages or registering each collection. Check the source scanning configuration when using icons in a new source location. Do not import the full icon catalog into browser code or add runtime network loading for these static UI icons; UnoCSS emits CSS for the icons used by the source.

If dependencies are missing, install the repository dependencies. If no suitable icon exists after related searches, explain the gap rather than silently drawing one. Follow the repository checks when changing UI or build code.