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

[t1u1]

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]

I raised an issue upstream as well: tailwindlabs/heroicons#1179

[armanrozika]

any solution for this? i am facing this issue as well