Rendering Issue with Adjusted viewBox SVGs in astro-icon v1.1.0

[tetracalibers]

What version of astro-icon are you using?

v1.1.0

Astro Info

Astro                    v4.4.14
Node                     v20.4.0
System                   macOS (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             astro-icon

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.

• demo: sample site

The following situations do not cause problems:

• Inline Icon Component: Adding is:inline to the Icon component.

  • demo: sample site
  • demo: source code

• CSS Fix: Adding overflow: visible to the symbol tag.

  • demo: sample site
  • demo: source code

What's the expected result?

Removing the viewBox from svg elements and assigning it to the symbol element resolves the issue:

<!-- Removed viewBox from svg element -->
<svg width="100" height="100" data-icon="astro-cropped">
  <!-- Instead, a viewBox is specified for the symbol element -->
  <symbol id="ai:local:astro-cropped" viewBox="4.93 2 22.15 28">
    <!-- ... -->
  </symbol>
  <use xlink:href="#ai:local:astro-cropped"></use>
</svg>

<!-- Removed viewBox from svg element -->
<svg width="100" height="100" data-icon="astro-cropped">
  <use xlink:href="#ai:local:astro-cropped"></use>
</svg>

Link to Minimal Reproducible Example

https://github.com/tetracalibers/astro-icon-symbol-viewbox-test