Closed dwightjack closed 1 year ago
Latest commit: 4805671fd265554a8f3accb8d9bc2a2819ad8dae
The changes in this PR will be included in the next version bump.
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
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) |
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;
}
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: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: