Как изменить стили SVG при использовании спрайта?

Question

[Никита Егоров]

Здесь задавался точно такой же вопрос, но год назад и ответа там нет.

В чем суть. Я собираю svg иконки в спрайт, перед этим удаляя атрибуты fill, stroke, style.

Подключаю следующим образом:

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

Иконка из спрайта берется, все подключается, но как понимаю, я не могу изменить стили определенного path, или все же как-то могу?

Answer 1

[Олег]

При использовании use содержимое будет в Shadow DOM, он изолирован и изменить стили определенного узла из вне нельзя.

- Можно изменять цвет, толщину границы, размеры но для всей иконки в целом.
- С помощью currentColor можно задать сразу 2 цвета.
- Если браузер умеет в CSS переменные, то можно красить иконки как хочешь.
- В будущем возможно будет псевдо-селектор ::shadow, который позволит влезать в Shadow DOM, но это не точно.

Comments

[Никита Егоров]

Спасибо, теперь все понятно