search

leshak / svelte-icons-pack

MIT License
58 stars 3 forks source link

Unable to set color of Hero icons after updating to 3.x #12

Open t1u1 opened 1 month ago

t1u1 commented 1 month ago

When I updated my project from svelte-icons-pack from 2.1.0 to 3.1.3, the color of the icons is not being preserved.

I was setting the color via CSS fill property like this:

<Icon src={HiSolidExternalLink} className="fill-primary" />

The fill-primary class comes from tailwind, which sets the CSS fill property.

After updating this library to 3.1.3, I tried changing to:

<Icon src={HiSolidArrowTopRightOnSquare} className="inline fill-primary" />

But it always appears in a different dark color. Looking at the generated HTML in the browser, I see that the icon source contains a hard coded fill value: fill="#0F172A"

See https://github.com/tailwindlabs/heroicons/blob/01c786b0353c7e51b86bc903a329e81d7578333d/src/20/solid/arrow-top-right-on-square.svg?short_path=f4fb63a

Setting the color via the color attribute to Icon doesn't work either.

t1u1 commented 1 month ago

I raised an issue upstream as well: https://github.com/tailwindlabs/heroicons/issues/1179