Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
t1u1 opened this issue May 19, 2024 · 1 comment
Open

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

t1u1 opened this issue May 19, 2024 · 1 comment

Comments

@t1u1
Copy link

t1u1 commented May 19, 2024

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
Copy link
Author

t1u1 commented May 19, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant