feat(components): unify icon sprite system across all frameworks#6
feat(components): unify icon sprite system across all frameworks#6chrismerkand wants to merge 2 commits into
Conversation
… components
Introduce a shared sprite architecture for Astro and framework icon
components with centralized symbol collection and deterministic sprite
IDs.
Changes included:
- Solid, React, Preact, Vue, and Svelte icons now emit `<symbol>`
definitions through raw SVG HTML during SSR and automatically omit
them during client hydration to avoid duplicate symbol insertion
after the DOMContentLoaded sprite relocation step.
- Refactor `Icon.astro` to reuse `resolveIcon()` from `core.ts`,
removing duplicated icon resolution and SVG normalization logic.
This significantly reduces maintenance overhead and keeps Astro and
framework wrappers behaviorally aligned.
- Add global body-level sprite extraction:
`collectSpriteIntoBody` now extracts the first occurrence of each
unique `<symbol id="icon:*">` into a centralized:
<svg id="icon-sprite">
injected immediately inside `<body>`.
- Standardize deterministic icon hashing across all renderers using
DJB2 base36 IDs. `Icon.astro` now matches the hashing strategy used
in `core.ts`, ensuring stable sprite IDs for `?icon` imports and
cross-framework consistency.
- Add inline rendering controls for all frameworks: `isInline`.
Astro uses `is:inline`.
This establishes a unified SVG sprite pipeline shared by Astro,
Solid, React, Preact, Vue, and Svelte while reducing duplicated HTML
and normalizing runtime behavior across frameworks.
|
@sudeep2003 Conflicts resolved and ready to merge. I've been testing this feature across all supported frameworks in both dev and production builds, with server and client islands, with local SVG files and Iconify icon sets, and using both sprite and inline modes. Everything is working as expected from my testing. |
@chrismerkand Feedback and reviews are welcome! If you find astro-iconset useful, please consider sharing it so more people can discover it. ⭐ |
2 participants
Introduce a shared sprite architecture for Astro and framework icon components with centralized symbol collection and deterministic sprite IDs.
Changes included:
<symbol>definitions through raw SVG HTML during SSR and automatically omit them during client hydration to avoid duplicate symbol insertion after the DOMContentLoaded sprite relocation step.Icon.astroto reuseresolveIcon()fromcore.ts, removing duplicated icon resolution and SVG normalization logic. This significantly reduces maintenance overhead and keeps Astro and framework wrappers behaviorally aligned.collectSpriteIntoBodynow extracts the first occurrence of each unique<symbol id="icon:*">into a centralized:<svg id="icon-sprite">injected immediately inside<body>.Icon.astronow matches the hashing strategy used incore.ts, ensuring stable sprite IDs for?iconimports and cross-framework consistency.isInline. Astro usesis:inline.This establishes a unified SVG sprite pipeline shared by Astro, Solid, React, Preact, Vue, and Svelte while reducing duplicated HTML and normalizing runtime behavior across frameworks.