The <use> element is very useful to prevent duplication of SVGs, but it is harder to style because it generates a shadow DOM that some CSS selectors can't reach.
There is a way to bypass this restriction tho !
Before
Your svg definition probably look like this :
<symbol id="icon-check" viewBox="0 0 24 24">
<path
d="M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z"
fill="#000000"
stroke="#000000"
/>
</symbol>
It has built-in colors and nothing happens when you change them :
svg {
fill: yellowgreen;
stroke: yellowgreen;
}
After
The solution is to set the color properties to currentColor inside your SVG definition :
<symbol id="icon-check" viewBox="0 0 24 24">
<path
d="M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z"
fill="currentColor"
stroke="currentColor"
/>
</symbol>
Now, the SVG color depends on it's parent color CSS property value :
svg {
color: yellowgreen;
}
Awesome !
Side notes
What I also like about this technique is that (by default) your SVGs will inherit the text color of where you put it. So if you have different backgrounds + text color combos, the SVG will adapt itself automaticly :
And it's possible to make color variants using opacity :
svg {
color: yellowgreen;
stroke-opacity: 0.5;
stroke-width: 3;
}
