search

natemoo-re / astro-icon

Inline and sprite-based SVGs in Astro made easy!
https://astroicon.dev
Other
990 stars 57 forks source link

feature: need to swap Out SVG Icons #221

Open antinmaze opened 2 months ago

antinmaze commented 2 months ago

What version of astro-icon are you using?

v1.1.0

Astro Info

The use case is to switch local icons for instance from the eye-fill svg and the eye-slash-fill svg.
Using javascript, this does not work trying updating the <Icon/> name. In this case I am not able to refresh the icon. However may be this is not the right strategy as an Icon should be a static by construction withe a unique id...
So another strategy would be to implement 2 icons and Hide/Show SVG Elements using display: none; or display: blocks;
The current Astro Icon release does not manage the display parameter
Some other strategy such as manipulating a multi paths svg but this is not the best solution as we need manipulate simple svg file. 
see https://css-tricks.com/swapping-svg-icons/ for more
But maybe I miss something to manage this use-case without relaying on React or Vue JS .

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

Chrome

Describe the Bug

The use case is to switch local icons for instance from the eye-fill svg and the eye-slash-fill svg. Using javascript, this does not work trying updating the name. In this case I am not able to refresh the icon. However may be this is not the right strategy as an Icon should be a static by construction withe a unique id... So another strategy would be to implement 2 icons and Hide/Show SVG Elements using display: none; or display: blocks; The current Astro Icon release does not manage the display parameter Some other strategy such as manipulating a multi paths svg but this is not the best solution as we need manipulate simple svg file. see https://css-tricks.com/swapping-svg-icons/ for more But maybe I miss something to manage this use-case without relaying on React or Vue JS .

What's the expected result?

Able to switch between Two icons updating the Icon name parameter from name="eye-slash-fill" to name="eye-fill"

        <button
          id="password-button"
          type="button"
          class="absolute inset-y-0 right-0 flex items-center px-2 bg-transparent"
        >
          <Icon
            id="eye-icon"
            class="absolute right-1 -mr-0 text-2xl"
            name="eye-slash-fill"
          />
        </button>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/astro-tdbmyy