Как красить спрайт?

Question

[svm2001]

При размещении svg-иконки кодом svg через include (webpack) у меня есть доступ к таким свойствам как fill, stroke, opacity у тега path и circle внутри svg.

При размещении svg-иконки через svg-sprite (использую npm модуль "svg-sprite-loader") в тег svg помещается тег use, который в свою очередь ссылается на сам svg-файл. Соответсвенно через css добраться до тегов path и circle, а также их свойств возможности нет. Отсюда проблема с ховерами и активными состояниями элементов, когда нужно перекрашивать отдельные части внутри svg. Например у меня есть svg иконка с 10-12ю тегами path внутри. И мне при ховере нужно закрасить зеленым все четные теги path.

Кто сталкивался с этим? Как можно победить?

Comments

[Ankhena]

Используйте кастомные свойства для fill, stroke и т.д.
Либо классы.

[Александр Васильев]

немного дополню Ankhena
используй currentColor для fill,stroke и на них уже применяй hover.

если цветов несколько, то примерно так

<rect width="16" height="16" rx="3" fill="var(--color-1)"></rect>
  <path d="M4 7L7 10L12 5" stroke="var(--color-2)" stroke-width="2"></path>

ну и в стилях отталкиваясь от класса, назначенного для svg

&__svg {

        &_radio {
            --color-1: #eaecf5;
            --color-2: #eaecf5;

        }

        &_check {
            --color-1: #eaecf5;
            --color-2: #eaecf5;

        }
    }