fix: show icon with gradients in Chrome

[dwightjack]

I noticed that some icons (like logos:vitejs) are not showing in Chrome, but they work fine in Firefox.

After some investigation, it seems that using display: none on the spritesheet's SVG causes gradients to don't work in Chrome. Resources:

• this old CSS-Tricks topic: https://css-tricks.com/forums/topic/gradients-and-hiding-symbol-defining-svg-blocks-in-html/
• this fairly new issue on SO: https://stackoverflow.com/questions/66199983/why-is-my-svgs-radialgradient-not-showing-in-chrome-based-browsers-but-does-in

I also created a demo in CodePen to reproduce the issue (screenshot below):

This PR uses another technique to hide the spritesheet that should make everything work in Chrome.

For reference, here are my system's details:

  System:
    OS: macOS 12.5.1
  Binaries:
    Node: 16.17.0 
    Yarn: 1.22.4 
    npm: 8.15.0 
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 105.0.1
    Safari: 15.6.1
  npmPackages:
    astro-icon: 0.7.3 => 0.7.3

[changeset-bot]

🦋 Changeset detected

Latest commit: 4805671

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
astro-icon	Patch
www	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
api-astroicon	✅ Ready (Inspect)	Visit Preview	Oct 4, 2022 at 7:50AM (UTC)
astroicon	✅ Ready (Inspect)	Visit Preview	Oct 4, 2022 at 7:50AM (UTC)

[dwightjack]

By the way, At the moment a quick fix could be adding the following CSS where the <Sprite.Provider /> component is used:

:global([astro-icon-spritesheet]) {
  display: block !important;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

[stramel]

Looks good! Thanks for the PR!