Negating fill:currentColor

Question

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 🤔

Answer 1

There's a way to make this work if you modify the SVG a bit. If you, instead of this:

<path fill="#BCBBBB" d="..."></path>

do this:

<g fill="#BCBBBB"><path d="..."></path></g>

i.e. wrap all the filled shapes in groups and specify the fill on the group instead of on the path itself, then the following happens:

According to the spec,

1. fill doesn't apply to <g> elements, so setting this property on the group doesn't hurt (as in, you don't suddenly get a filled rectangle), and

2. fill is inherited, and thus the <g>'s fill will apply to the <path>.

Next, if instead of * you use *:not(g) in your CSS (in your particular example, just using path would also work), then in the default case, fill: currentColor will tell the path to use the current color (and ignore the parent group's fill value). In the override case, where you set fill: inherit, you tell the path to go back to inheriting the parent's fill value.

.svg-icon *:not(g) {
  fill: currentColor;
}

.svg-icon.iconLogoGlyph *:not(g) {
  fill: inherit;
}

<!-- these two SVGs are identical except that the
     first one doesn't have the `iconLogoGlyph` class -->

<div style="color: green">

  <svg role="icon" class="svg-icon" width="25" height="30" viewBox="0 0 25 30"><g fill="none"><g fill="#BCBBBB"><path d="M21 27v-8h3v11H0V19h3v8z"></path></g><g fill="#F48024"><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></g></svg>
  
  <svg role="icon" class="svg-icon iconLogoGlyph" width="25" height="30" viewBox="0 0 25 30"><g fill="none"><g fill="#BCBBBB"><path d="M21 27v-8h3v11H0V19h3v8z"></path></g><g fill="#F48024"><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></g></svg>

</div>

You only have to make this SVG change to icons where you expect you might want to use the native colors. Icons that are always supposed to be filled with the current color don't need to be changed.