How to change SVG styles when using a sprite?

Question

SVG

The exact same question was asked here , but a year ago there was no answer.
What is the point. I collect svg icons into a sprite, before that, removing the attributes fill, stroke, style.
I connect like this:

<svg class="icon icon-name ">
    <use xlink:href="path/to/sprite.svg#name"></use>
</svg>

The icon is taken from the sprite, everything is connected, but as I understand it, I can’t change the styles of a certain path, or can I still do it somehow?

Answer 1

When using use, the content will be in the Shadow DOM, it is isolated and you cannot change the styles of a specific node from outside.
- You can change the color, border thickness, size but for the entire icon as a whole.
- Using currentColor , you can set 2 colors at once .
- If the browser knows how to use CSS variables , then you can paint the icons as you like.
- In the future, there may be a pseudo-selector ::shadow , which will allow you to fit into the Shadow DOM, but this is not certain.