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 wit

Answer 1

The element referenced by the 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 element itself, and don't set rules for the inner .primary-stroke so that they can inherit from the .

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

/* 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  */
.fixed {
  fill: orange;
  stroke: red;
}

svg { display: block; }

---

And then for the example in your codepen, you'll need to add specific rules for the one path that doesn't change color e.g:

#mail path:not([class]) {
  stroke: currentColor;
  fill: none;
}

updated codepen.

But the best would be to mark it with a class (like I did with .fixed) if you have control over this sprite-sheet.