Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can SVG icons have fill:currentColor by default?

See original GitHub issue

What package(s) are you using?

@carbon/icons-react
carbon-components
carbon-components-react

Summary

Hello. I am wondering why SVG icons don’t have fill: currentColor by default. Thus, it will inherit the color property of its container. This simplifies the process of setting the color a bit.

Of course, I can create a HOC / wrapper for the icons where I do this myself.

I was just curious if you had any reasons for not having it and what those might be.

Relevant information

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:6 (5 by maintainers)

Top GitHub Comments

1reaction

joshblackcommented, Jul 9, 2020

Thanks @SimonFinney! Opened an issue over at: https://github.com/carbon-design-system/carbon/issues/6432

0reactions

SimonFinneycommented, Jul 9, 2020

This appears to cause regression in dark themes in cases where the icon is dependent on a fill from its parent - here’s an example of the Search component:

Default

This is resolved by removing the currentColor on the icon as per the original behavior:

currentColor removed

But also if the color of the parent is set to the fill value:

color

We can use this as a workaround for now, but I wanted to raise it for awareness as I suspect this may be a silent issue reoccurring elsewhere and could easily be overlooked on lighter themes.