natemoo-re / astro-icon

Inline and sprite-based SVGs in Astro made easy!

Home Page:https://astroicon.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Reference to sprite lost in dynamic usage

hrvstr opened this issue · comments

What version of astro-icon are you using?

1.0.2

Astro Info

Astro                    v4.2.1
Node                     v21.5.0
System                   macOS (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             astro-icon
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

Chrome, Firefox and Safari

Describe the Bug

Removing the first instance of an icon from the DOM breaks all other instances on the page because the reference is lost.

Please provide a prob to disable sprite behavior for dynamic usage.

Original discord thread for reference:
https://discord.com/channels/830184174198718474/1197851914784755733

Seems like the new method for sprites doesn’t work with dynamic usage like this because it loses the reference to the original sprite.

I can also look into providing a prop that disables this sprite behavior

Demo: https://golden-naiad-6e9246.netlify.app/

What's the expected result?

Removing an instance shouldn't break other icons.

Link to Minimal Reproducible Example

https://github.com/hrvstr/astro-icon-list