Auto-optimized sprites using `<symbol>` and `<use>`
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 38/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- nuxt, typescript
- Domain
- frontend
Research direction
Start at the Nuxt Icon module's component and its Iconify integration; the issue names no specific files or tests. Review how repeated icon references are rendered, then verify that the first use defines and renders a unique while later uses render only references, with output matching the requested HTML structure.
Written by the indexing model from the issue text.
Description
Astro Icon is a similar module for Astro projects that also utilizes Iconify under the hood. It automatically optimizes repeated references to the same icon on a page, using a simple approach that results in smaller HTML documents (official documentation).
In a nutshell, the first time the <Icon> component is included on a page, it defines a sprite <symbol> with a unique ID and immediately renders that symbol with the <use> element. If the same icon is referenced again, <Icon> will render only a <use> element, reducing the overall size of the HTML document by referencing the existing <symbol>.
With that said:
<Icon name="logo" />
<!-- First usage generates the following HTML -->
<svg data-icon="logo">
<symbol id="ai:uniqueid"><!-- contents of logo.svg --></symbol>
<use xlink:href="#ai:uniqueid"></use>
</svg>
<Icon name="logo" />
<!-- Additional usage generates the following HTML -->
<svg data-icon="logo">
<use xlink:href="#ai:uniqueid"></use>
</svg>
It'd be nice to have this feature in Nuxt Icon module as well.
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 97
- Avg merge
- 9d 2h
- Merged PRs (30d)
- 5
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from nuxt/icon
-
Difficulty 2/5 1-3 hours Newbie friendliness 55/100
-
Difficulty 3/5 1-2 days Newbie friendliness 65/100
-
Difficulty 3/5 1-2 days Newbie friendliness 42/100
-
Difficulty 4/5 3-5 days Newbie friendliness 45/100
-
Difficulty 4/5 3-5 days Newbie friendliness 38/100
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
lyswhut/lx-music-desktop#3026 ·
-
area: ci type: test
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
schlessera/brain-kit#2769 ·
Maintainers usually reply within 1 day
-
Read a vector index's quantization back on Neo4j 2026.10, which reports vector.quantization.typeOpen
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
liberation-data/drivine#231 ·
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
alveusgg/alveusgg#2502 · 3 comments ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day