refactor(web): migrate all ad-hoc inline SVG icons to lucide-solid #199

New issue

Open

opened 2026-07-22 02:08:51 +02:00 by dominik.polakovics · 0 comments

dominik.polakovics commented

2026-07-22 02:08:51 +02:00

Owner

What to build

Replace every hand-inlined SVG icon in the web SPA with the equivalent icon from lucide-solid, so the app uses one icon system throughout. The dependency and usage pattern (per-icon imports, currentColor, ~18–20px) are established by the settings rework (#198) — follow the same conventions.

Known ad-hoc inline SVGs to migrate (sweep the codebase for the rest): the SideNav gear (Settings link), hamburger/menu in the mobile top strip, chevrons (rail collapse/re-open, breadcrumb/disclosure arrows), and any other one-off <svg> elements in components. Where an exact Lucide equivalent exists, use it; where the current glyph is bespoke, pick the closest Lucide icon rather than keeping a mixed system.

Visual size/stroke should match the current rendering closely enough that layouts don't shift (Lucide is 24px stroke-based like the existing glyphs; set explicit size per site).

Acceptance criteria

No hand-inlined <svg> icon markup remains in web/src components (decorative/non-icon SVGs, if any, are out of scope — note them in the PR if kept)
All icons imported per-icon from lucide-solid (tree-shaken; no full-library import)
Icons inherit currentColor and render correctly in light and dark themes
No layout shifts: sizes match the previous glyphs at each call site
Interactive icons keep their existing accessible names/labels (aria-label/title unchanged)

Blocked by

#198

## What to build Replace every hand-inlined SVG icon in the web SPA with the equivalent icon from `lucide-solid`, so the app uses one icon system throughout. The dependency and usage pattern (per-icon imports, `currentColor`, ~18–20px) are established by the settings rework (#198) — follow the same conventions. Known ad-hoc inline SVGs to migrate (sweep the codebase for the rest): the SideNav gear (Settings link), hamburger/menu in the mobile top strip, chevrons (rail collapse/re-open, breadcrumb/disclosure arrows), and any other one-off `<svg>` elements in components. Where an exact Lucide equivalent exists, use it; where the current glyph is bespoke, pick the closest Lucide icon rather than keeping a mixed system. Visual size/stroke should match the current rendering closely enough that layouts don't shift (Lucide is 24px stroke-based like the existing glyphs; set explicit `size` per site). ## Acceptance criteria - [ ] No hand-inlined `<svg>` icon markup remains in `web/src` components (decorative/non-icon SVGs, if any, are out of scope — note them in the PR if kept) - [ ] All icons imported per-icon from `lucide-solid` (tree-shaken; no full-library import) - [ ] Icons inherit `currentColor` and render correctly in light and dark themes - [ ] No layout shifts: sizes match the previous glyphs at each call site - [ ] Interactive icons keep their existing accessible names/labels (aria-label/title unchanged) ## Blocked by - #198

dominik.polakovics added the

needs-triage

label

2026-07-22 02:08:51 +02:00

dominik.polakovics referenced this issue

2026-07-22 02:11:32 +02:00

feat(web): settings rework — category-list → detail-subpage for global and repo settings #198

dominik.polakovics referenced this issue

2026-07-22 03:01:56 +02:00

feat(web): category→subpage settings IA for global and repo settings #200