Negating fill:currentColor

user_2804712 0
Viewed 5500

Is there a way to negate or remove fill: currentColor?

.svg-icon * {
  /* Targets all sub-elements so we can deliver icons with a color override of our choice */
  fill: currentColor;
}

.svg-icon.iconLogoGlyph * {
  /* How do I  negate fill: currentColor further down the cascade? */
  fill: inherit;
  /* I want the natural colors from the SVG */
}
<svg role="icon" class="svg-icon iconLogoGlyph" width="25" height="30" viewBox="0 0 25 30"><g fill="none"><path fill="#BCBBBB" d="M21 27v-8h3v11H0V19h3v8z"></path><path fill="#F48024" d="M5.402 19.101l13.561 1.96.164-2.38-13.256-2.547-.469 2.967zM7.2 12.3l12 5.6 1.1-2.4-12-5.6-1.1 2.4zm3.4-5.9l10.2 8.5 1.7-2-10.2-8.5-1.7 2zM17.1.2L15 1.8l7.9 10.6 2.1-1.6L17.1.2zM5 25h14v-3H5v3z"></path></g></svg>

I have a set of icons that are authored with SVG. Some of these icons contain inline styling with color information. The most common use case is to ignore these inline fills and for them to inherit their parent's color by declaring fill: currentColor in CSS. But, in some cases, like our logo, we'd like for these embedded colors to be shown. Elsewhere, say, a footer, we'd like to override the colors with a single color of our choice.

For reasons™, I'm stuck with these classes that are in the library. Each icon has the class svg-icon and a more specific class, in this case iconLogoGlyph.

How can I negate fill: currentColor using only CSS if I can't touch the classes? I've experimented with :not to select all but .iconLogoGlyph, but this wouldn't let me use fill: currentColor when I actually need it.

What is the opposite of fill: currentColor? It's not fill: inherit or fill: none. I need something like fill: just grab what's in the SVG, yo

svg css
3 Answers

There is another solution, if you can slightly change your global fill: currentColor rule and SVGs which need to preserve their colors.

Change your global rule to something like this:

path:not(.important), circle:not(.important) {
    fill: currentColor;
}

And in your SVGs add important class to all filled parts, like:

<path class="important" fill="#FFF" ...

Unlike the <g> tag solution this method allows you easily replace all the needed parts automatically, using editor tools.

user_14496740
Related