perf(web): load project icons as one chunk instead of ~1,700

[juliusmarminge]

lucide-react/dynamic emits one chunk per icon. Project icon overrides used it, so the web build wrote ~1,700 tiny icon chunks (2,343 JS chunks in total).

Change

• Saved lucide project icons now resolve by name against a single module that lazily imports lucide-react.
• The resolver also accepts lucide's deprecated alias names, so overrides saved with an older name still render.
• The icon picker and the project favicon both use it. lucide-react/dynamic is no longer imported.

Results

vp build in apps/web on cups, three runs each, after #20114.

	Before	After
Build time	40.8 / 42.4 / 41.1s	40.0 / 37.5 / 39.4s
JS chunks	2,343	740
Files in dist	4,653	1,484
dist size	136 MB	125 MB
App load JS (entry + main)	1,267 kB gz	1,260 kB gz
Extra JS to draw a saved lucide icon	56 kB gz	154 kB gz

Bundled dev cold app compile (first request for the app in a fresh vp dev): 10.5s on main, 9.3s on this branch. These were measured in separate sessions, so treat them as "no regression" rather than a speedup. HMR was not measured.

The trade-off is the last row. Projects that use a lucide icon override now load the whole icon set once (137 kB gzip for the icon chunk itself), instead of a 254 kB name index plus one icon. That chunk is only fetched when such an icon is shown or the picker opens. Projects without a lucide icon pay nothing.

Verification

• projectIconOptions tests now check that every offered name resolves, including saved legacy spellings (arrow-down-0-1, alarm-check).
• All 1,917 names in lucide's dynamic import map resolve to the same component as before.
• Browser check with copied real data: the picker search renders icons, and saving alarm-clock-check shows it in the sidebar and header.

Fixes #9544

🤖 Generated with Claude Code

---

[macroscopeapp]

Approvability

Verdict: Needs Human Approval

Macroscope's review found this PR requires human approval — This production web change replaces per-icon loading with a full Lucide icon-set chunk, affecting payload and loading behavior for project icons and the picker. It also adds a file-level suppression for the restricted-import lint rule, so the change warrants human review.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Team
• Run ID: 1ca8cc23-28ea-405b-ad36-c17b027cbbac

📥 Commits

Reviewing files that changed from the base of the PR and between 9b150f7 and a18da9a.

📒 Files selected for processing: 6

• apps/web/src/components/ProjectFavicon.test.tsx
• apps/web/src/components/ProjectFavicon.tsx
• apps/web/src/components/settings/ProjectIconPickerDialog.tsx
• apps/web/src/lib/lucideIconByName.ts
• apps/web/src/projectIconOptions.test.ts
• apps/web/src/projectIconOptions.ts

💤 Files with no reviewable changes: 1

• apps/web/src/components/ProjectFavicon.test.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.

📝 Walkthrough

The project icon flows now use a local Lucide icon lookup. It provides canonical icon names, resolves icon components, and returns no match for unknown names. Project icon filtering and rendering use this lookup.

Changes: Lucide icon resolution

Layer / File(s)	Summary
Local icon lookup apps/web/src/lib/lucideIconByName.ts	Adds canonical kebab-case icon names and resolves names to Lucide components. Unknown names return undefined.
Project icon options and rendering apps/web/src/projectIconOptions.ts, apps/web/src/projectIconOptions.test.ts, apps/web/src/components/ProjectFavicon.tsx, apps/web/src/components/ProjectFavicon.test.tsx, apps/web/src/components/settings/ProjectIconPickerDialog.tsx	Project icon filtering and display use the local lookup. Tests check listed names, selected spellings, and unknown names. The favicon test removes its lucide-react/dynamic mock.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~12 minutes

Change: Refactor

Merge Risk: ⚪ Minimal · up to a18da

No actionable merge-blocking issue remains in the reviewed icon changes.

Pre-merge checks: 4

Check name	Status	Explanation
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Title check		The title is concise, specific, and accurately describes the main performance change: replacing many project-icon chunks with one chunk.
Description check		The description explains the problem, implementation, measured results, trade-off, verification steps, issue reference, and UI evidence. It does not use the required Problem and Scope and approval hea…

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}