@Genri_Rus

Как svg sprite подружить с sass переменными?

Допустим есть svg спрайт

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="menu-white" viewBox="0 0 42 42">   
        <circle cx="20" cy="20" r="19" stroke="white" stroke-width="2"/>
            <circle cx="19.5" cy="10.5" r="2.5" fill="var($color-white)"/>
            <circle cx="19.5" cy="19.5" r="2.5" fill="var($color-white)"/>
            <circle cx="19.5" cy="28.5" r="2.5" fill="var($color-white)"/>
    </symbol>
</svg>


В sass соответственно объявлена переменная: $color-white: #fff

Как можно передать переменную $color-white в svg?
  • Вопрос задан
  • 279 просмотров
Решения вопроса 1
RAX7
@RAX7
https://css-tricks.com/cascading-svg-fill-color/
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="none">
  <symbol id="menu-white" viewBox="0 0 42 42">
    <circle cx="20" cy="20" r="19" stroke="white" stroke-width="2"/>
    <circle cx="19.5" cy="10.5" r="2.5" fill="currentColor"/>
    <circle cx="19.5" cy="19.5" r="2.5" fill="currentColor"/>
    <circle cx="19.5" cy="28.5" r="2.5" fill="currentColor"/>
  </symbol>
</svg>

<svg class="ico" width="42" height="42"><use xlink:href="#menu-white"/></svg>

$color-white: #fff;

.ico {
  color: $color-white;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы