You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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"
What version of
astro-icon
are you using?v1.1.0
Astro Info
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"
Link to Minimal Reproducible Example
https://stackblitz.com/edit/astro-tdbmyy
The text was updated successfully, but these errors were encountered: