javascript - Controlling SVG colors with CSS

Question

I'm setting up a few icons in a library that's using some basic CSS and an SVG Sprite (generated through webpack).

Some of the icons I want to be able to color with multiple colors. My set up looks like:

mail.svg (details of the svg are omitted for simplicity)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" width="64" height="64">
  <polyline class="primary-stroke" fill="none" stroke-width="2" [more-stuff-here]></polyline>
  <path fill="none" stroke-width="2" [more-stuff-here]></path>
  <line class="primary-stroke" fill="none" stroke-width="2" [more-stuff-here]></line>
</svg>

My computed CSS (blue is the primary accent color) looks like:

svg {
  fill: currentColor;
  stroke: currentColor;
}

.primary-stroke {
  stroke: blue;
  fill: none;
}

And my HTML looks like:

<svg><use xlink:href="#mail"></svg>

This all works exactly as expected, but now I want to take it a step further. I want to be able to add a class to the element to determine if this instance should contain 1 single color or 2 colors.

My attempt was pretty simple. I just added a single-color class to the svg element to look like:

<svg class="single-color"><use xlink:href="#mail"></svg>

And modified the SCSS. The computed CSS looks like:

.single-color .primary-stroke {
  stroke: currentColor;
  fill: none;
}

But, it definitely does not work. The primary styles still take effect. I'm new to working with SVGs and I'm not sure if what I'm trying to do is even possible with a sprite?

CodePens demonstrating the issue:

• Working Demo (no Sprites): https://codepen.io/amlyhamm/pen/ddjXBp

• Not Working (using Sprites): https://codepen.io/amlyhamm/pen/paZbMq

Both examples use the same classes and SVGs.

Answer 1

The element referenced by the <use> element is not per se part of the DOM chain, it is only present in the shadow DOM, and hence, you can't access it through your selector.

The solution would be to target directly the <use> element itself, and don't set rules for the inner .primary-stroke so that they can inherit from the <use>.

/* 
  don't set any direct rule on the .variable ones 
  otherwise, they won't be able to inherit from the <use>
*/

/* target the uses */
.stroke-only use[href="#rects"] {
  stroke: blue;
  fill: none;
}
.stroke-and-fill use[href="#rects"] {
  stroke: blue;
  fill: green;
}

/* this one won't get influenced by the <use> */
.fixed {
  fill: orange;
  stroke: red;
}

svg { display: block; }

<svg width="0" height="0" style="position:absolute;z-index:-1">
  <defs>
    <g id="rects">
      <rect class="variable" x=5 y=5 width=50 height=50 />
      <rect class="fixed" x=60 y=5 width=50 height=50 />
    </g>
  </defs>
</svg>

<svg class="stroke-only" height=70 >
  <use href=#rects />
</svg>

<svg class="stroke-and-fill" height=70 >
  <use href=#rects />
</svg>