Styling SVG <use> Content with CSS

TheSmithy Articles and Links
Styling SVG <use> Content with CSS

Takeaway:

Use css variables (or custom properties) to get access to the svg in the shadow DOM.

https://caniuse.com/#feat=css-variables

Example:

<svg class="icon" viewBox="0 0 100 100">
  <use xlink:href="#ic" x="0" y="0" />
</svg>
<svg class="icon" viewBox="0 0 100 100">
  <use class="ic-1" xlink:href="#ic" x="0" y="0" />
</svg>
<svg class="icon" viewBox="0 0 100 100">
  <use class="ic-2" xlink:href="#ic" x="0" y="0" />
</svg>

<svg>
  <symbol id="ic" fill="none">
    <circle stroke="grey" stroke-width="3" style="stroke: var(--color1, grey)" cx="50" cy="50" r="40"/>
    <circle stroke="orange" stroke-width="3" style="stroke: var(--color2, orange)" cx="50" cy="50" r="20"/>
  </symbol>
</svg>
.icon {
  width: 100px;
  height: 100px;
}
.ic-1 {
  --color1: #5af;
  --color2: #5dd;
}
.ic-2 {
  --color1: #a39;
  --color2: #e39;
}