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
Removing the viewBox from svg elements and assigning it to the symbol element resolves the issue:
<!-- Removed viewBox from svg element --><svgwidth="100" height="100" data-icon="astro-cropped"><!-- Instead, a viewBox is specified for the symbol element --><symbolid="ai:local:astro-cropped" viewBox="4.93 2 22.15 28"><!-- ... --></symbol><usexlink:href="#ai:local:astro-cropped"></use></svg><!-- Removed viewBox from svg element --><svgwidth="100" height="100" data-icon="astro-cropped"><usexlink:href="#ai:local:astro-cropped"></use></svg>
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, Safari, Firefox
Describe the Bug
SVG icons adjusted with tools like SVG Crop are partially missing when rendered using astro-icon v1.1.0.
The following situations do not cause problems:
Inline Icon Component: Adding
is:inline
to the Icon component.CSS Fix: Adding
overflow: visible
to the symbol tag.What's the expected result?
Removing the
viewBox
fromsvg
elements and assigning it to thesymbol
element resolves the issue:Link to Minimal Reproducible Example
https://github.com/tetracalibers/astro-icon-symbol-viewbox-test
The text was updated successfully, but these errors were encountered: