svelte-icons-pack
svelte-icons-pack copied to clipboard
Unable to set color of Hero icons after updating to 3.x
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.