svelte-icons-pack icon indicating copy to clipboard operation
svelte-icons-pack copied to clipboard

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

Open t1u1 opened this issue 3 months ago • 1 comments

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 avatar May 19 '24 12:05 t1u1