Перекрасить svg изображение, вставленное через background-image: если можно, то как?

Question

[gregorypetrov]

В веб-интерфейсе десятки иконок в формате svg.
Они вставлены так: кнопка - это div, его background-image - это svgшная иконка.

Есть ли способ программно (css, javascript или еще как-либо) поменять отображаемый цвет заливок и контуров всех этих иконок?

Если никак, то какие альтернативы?
Спасибо всем!

Answer 1

[fronter321]

Background-image не является объектом страницы. Так что никак(на мой взгляд.). Только прописывать иконки внутри разметки.
Ну и вот здесь есть обсуждения на эту тему тыц

Answer 2

[Stepanya]

<!-- `<use>` shape defined ON THIS PAGE somewhere else -->
<svg viewBox="0 0 100 100">
   <use xlink:href="#icon-1"></use>
</svg>

<!-- `<use>` shape defined in an EXTERNAL RESOURCE -->
<svg viewBox="0 0 100 100">
   <use xlink:href="defs.svg#icon-1"></use>
</svg>

https://css-tricks.com/svg-use-external-source/