Skip to content

fix(icons): stop collapsing multi-path icons in the generator#519

Merged
kelsos merged 1 commit intorotki:mainfrom
kelsos:fix/icon-generator-stop-collapsing
Apr 27, 2026
Merged

fix(icons): stop collapsing multi-path icons in the generator#519
kelsos merged 1 commit intorotki:mainfrom
kelsos:fix/icon-generator-stop-collapsing

Conversation

@kelsos
Copy link
Copy Markdown
Member

@kelsos kelsos commented Apr 27, 2026

Summary

The build-time icon generator was running ~190 lines of hand-rolled SVG path parsing to flatten lucide's per-primitive [tag, attrs] entries into a single concatenated d string. That round-trip rendered badly at small sizes on multi-segment icons — most visibly lu-eye-off, which collapsed to little more than its diagonal slash inside menu rows.

This rewrites the generator (now TypeScript) to:

  • pass lucide's default export through verbatim — its shape is already what RuiIcon consumes;
  • walk parsed XML for custom SVGs and emit one tuple per renderable primitive (path, rect, circle, ellipse, line, polyline, polygon);
  • use fast-glob (already a project dep, used in build-web-types.mjs) instead of two near-duplicate recursive walkers + per-leaf lstat;
  • run lucide imports and chunk-file writes in parallel;
  • fail fast with a summary if any icon fails to load (was: silent consola.warn + missing export);
  • emit a header on every generated chunk that suppresses lint/format/typecheck noise across eslint, prettier, dprint, oxlint, and biome.

RuiIcon.vue is intentionally unchanged — it already iterates components and renders each tuple, so multi-entry output drops in cleanly.

Side effects

  • tsconfig.node.json includes src/types/icons.ts so the script can import GeneratedIcon under node16 module resolution.
  • README and CLAUDE.md docs corrected: generate:iconsgenerate-icons, remix-iconsLucide, clarified that src/icons/ is gitignored.

Test plan

  • pnpm typecheck clean.
  • pnpm lint — zero errors on the new script.
  • pnpm test:run — 69 files / 1069 tests passing.
  • pnpm build — emits 4 chunks; multi-path icons now have multiple ["path", ...] entries.
  • pnpm generate-icons runs in ~1.7 s end-to-end (parallelized).
  • Visual: example app /icons and storybook render lu-eye-off, lu-trash-2, lu-bug, lu-rotate-ccw with all subpaths at both 24 px and 18 px.

The generator was running ~190 lines of hand-rolled SVG path parsing to
flatten lucide's per-primitive `[tag, attrs]` entries into a single
concatenated `d` string. That round-trip rendered badly on multi-segment
icons (most visibly `lu-eye-off`).

Rewrite as TypeScript that passes lucide data through verbatim and emits
one tuple per renderable primitive for custom SVGs; use `fast-glob`,
parallel imports and writes, and fail-fast on broken icons. `RuiIcon.vue`
is unchanged. Generated chunk headers also suppress the usual lint/format
noise (eslint, prettier, dprint, oxlint, biome).

Docs corrected (`generate:icons` -> `generate-icons`, `remix-icons` ->
Lucide, src/icons/ flagged as gitignored). `tsconfig.node.json` includes
`src/types/icons.ts` so the script can import `GeneratedIcon` under node16
module resolution.
@kelsos kelsos requested a review from a team as a code owner April 27, 2026 18:07
@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Apr 27, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.87%. Comparing base (962dd5a) to head (2c15f1c).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #519   +/-   ##
=======================================
  Coverage   84.87%   84.87%           
=======================================
  Files         143      143           
  Lines        5209     5209           
  Branches     1553     1553           
=======================================
  Hits         4421     4421           
  Misses        788      788           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@kelsos kelsos merged commit 2c15f1c into rotki:main Apr 27, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants