Negation Fill: currentColor

Question

Is there a way to undo or delete 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>

Run codeHide result

I have a set of icons created using SVG. Some of these icons contain an inline style with color information. The most common use case is to ignore these inline fills and inherit their parent for them by colordeclaring fill: currentColorin CSS. But in some cases, like our logo, we would like these inline colors to display. Elsewhere, say, a footer, we would like to redefine the colors with one color of our choice.

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

fill: currentColor, CSS, ? :not, , .iconLogoGlyph, fill: currentColor, .

fill: currentColor? fill: inherit fill: none. - fill: just grab what in the SVG, yo 🤔

Answer 1

, SVG. :

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

:

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

. , , :

,

• fill <g>, (, )

• fill , <g> fill <path>.

, * *:not(g) CSS ( path), fill: currentColor ( ). , fill: inherit, .

.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>

Hide result

SVG , , . , , .

Answer 2

, fill , . , , - CSS, , .

Answer 3

, fill: currentColor SVG, .

:

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

SVG important , :

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

<g> , .