Refactor Icon.tsx: split 70 inline SVGs into individual files

[talissoncosta]

Problem

Icon.tsx is 1,268 lines / 66KB containing 61 inline SVGs in a single switch statement. Additionally, 19 separate SVG components exist in web/components/svg/ and ~35 icons use @ionic/react IonIcon across 42 files (#7022) — 3 icon systems total.

Performance impact

• 66KB parsed on every page load even if only a few icons are used
• Not tree-shakable — bundler includes all 61 icons regardless of usage
• No lazy loading — heavy icons (GitHub SVGs) load on pages that don't need them

For non-frontend context

Think of it like importing an entire Python library when you only need one function. Tree-shaking (the bundler excluding unused code) only works with proper module imports, not giant switch statements.

Solution

1. Extract each icon to its own file (e.g. components/icons/CloseIcon.tsx)
2. Integrate the 19 svg/ components into the same system
3. Keep the <Icon name="..." /> API as a convenience wrapper that dynamically imports
4. Bundlers tree-shake unused icons automatically

// Before: 66KB loaded regardless
<Icon name="close" />

// After: only this icon is bundled
import { CloseIcon } from 'components/icons/CloseIcon'
<CloseIcon />

Acceptance criteria

• Each icon in its own file
• svg/ components integrated
• Existing <Icon name="..." /> API still works
• Measurable reduction in initial bundle size
• No visual regressions

Related

• Remove @ionic/react IonIcon dependency #7022 — Remove @ionic/react IonIcon (blocked by this issue)

---

Part of the Design System Audit (#6606) · Epic: #6882

[parthiv011]

Hi @talissoncosta can i pick this issue up ?