#Astro Icon - Gradients

12 messages · Page 1 of 1 (latest)

little pond
#

So I have the logo to astro-embed, and it has only a gradient for a fill. Using the <Icon /> component, and targeting the correct file name, it's blank.

SVG:

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 0C4.95979 0 3.2429 0.711159 1.97703 1.97703C0.711159 3.2429 0 4.95979 0 6.75L0 41.25C0 43.0402 0.711159 44.7571 1.97703 46.023C3.2429 47.2888 4.95979 48 6.75 48H41.25C43.0402 48 44.7571 47.2888 46.023 46.023C47.2888 44.7571 48 43.0402 48 41.25V6.75C48 4.95979 47.2888 3.2429 46.023 1.97703C44.7571 0.711159 43.0402 0 41.25 0H6.75ZM18.8438 18.8438C19.2664 18.4211 19.5039 17.8478 19.5039 17.25C19.5039 16.6522 19.2664 16.0789 18.8438 15.6563C18.4211 15.2336 17.8478 14.9961 17.25 14.9961C16.6522 14.9961 16.0789 15.2336 15.6563 15.6563L8.90625 22.4062C8.69649 22.6153 8.53006 22.8637 8.41649 23.1372C8.30293 23.4107 8.24448 23.7039 8.24448 24C8.24448 24.2961 8.30293 24.5894 8.41649 24.8628C8.53006 25.1363 8.69649 25.3847 8.90625 25.5938L15.6563 32.3438C16.0789 32.7664 16.6522 33.0039 17.25 33.0039C17.8478 33.0039 18.4211 32.7664 18.8438 32.3438C19.2664 31.9211 19.5039 31.3478 19.5039 30.75C19.5039 30.1522 19.2664 29.5789 18.8438 29.1563L13.6875 24L18.8438 18.8438ZM32.3438 15.6563C32.1345 15.447 31.886 15.2809 31.6125 15.1677C31.3391 15.0544 31.046 14.9961 30.75 14.9961C30.454 14.9961 30.1609 15.0544 29.8875 15.1677C29.614 15.2809 29.3655 15.447 29.1563 15.6563C28.947 15.8655 28.7809 16.114 28.6677 16.3875C28.5544 16.6609 28.4961 16.954 28.4961 17.25C28.4961 17.546 28.5544 17.8391 28.6677 18.1125C28.7809 18.386 28.947 18.6345 29.1563 18.8438L34.3125 24L29.1563 29.1563C28.7336 29.5789 28.4961 30.1522 28.4961 30.75C28.4961 31.3478 28.7336 31.9211 29.1563 32.3438C29.5789 32.7664 30.1522 33.0039 30.75 33.0039C31.3478 33.0039 31.9211 32.7664 32.3438 32.3438L39.0938 25.5938C39.3035 25.3847 39.4699 25.1363 39.5835 24.8628C39.6971 24.5894 39.7555 24.2961 39.7555 24C39.7555 23.7039 39.6971 23.4107 39.5835 23.1372C39.4699 22.8637 39.3035 22.6153 39.0938 22.4062L32.3438 15.6563Z" fill="url(#paint0_linear_663_163)"/>
<defs>
<linearGradient id="paint0_linear_663_163" x1="14.1563" y1="0.562499" x2="33.8437" y2="47.4375" gradientUnits="userSpaceOnUse">
<stop stop-color="#D779EC"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
</defs>
</svg>

Called:

<Icon class="contributor-logo" name="astro-embed" width={48} height={48} />
image.png image.png image.png
#

@chrome wedge, sorry for the @, just wanted to make sure you're aware. I can also file a GitHub Issue if needed.

keen karma
little pond
keen karma
little pond
little pond
#

From more research it seems to be because astro-embed renames gradient definitions IDs to a, b, c, etc. Thus more icons share the same ID for that linearGradient making the icons the wrong color or trasnparent.

misty snow
#

FYI - we also generally discourage @ pinging people directly, unless it's really necessary.

fluid hinge
#

Hey Pargonate, just bumping this one, did you ever figure out a solution?

#

Currently, my solution is to create a custom icon component with the SVG for each icon I want to use from iconify, which I can then apply the gradients to

#

But it'd certainly be nice to get it working standardly

little pond