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

Рустам Байназаров, т.е. так можно делать ?

SASS чисто для css кода, а svg - создавать в css дефолтные переменные для оформления вектора ?

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

Рустам Байназаров, ну вот приехали X!D

Получается я нашел минусы sass ?

Придется делать с помощью дефолтных переменных в css ?
fill="var($color-white)"

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

Рустам Байназаров, странно, не работает
P.S. Походу баг какой-то

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

Рустам Байназаров, а у меня hover не работает почему-то

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

Рустам Байназаров, сможете показать небольшой пример, что нужно сделать ?

P.S. Мне маленькие кружочки нужно менять отдельно от главного круга при том, что круг при наведении тоже должен меняться

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

Рустам Байназаров, иконка была нарисована в фигме

Генератор online есть какой-нибудь для таких целей или все таки illustrator придется использовать ?

Как 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="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>

Path тут нет или его можно сгенерировать ?

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

RAX7, я так понял, что только можно с помощью дефолтных переменных fill="var($color-white) ?

С помощью sass такое реализовать невозможно ?

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

RAX7, ясно

Сейчас у меня возникла другая проблема

Вот тут: https://jsfiddle.net/15neproa/1/

При наведении меняется только сами кружочки, но как поменять цвет и самого круга ?
fill="green" при hover заливает все маленькие кружочки

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

RAX7, а еще такой вопрос

Вообще можно ли подставлять svg sprite по id #svg в сам css при hover?

Допустим при наведении подставлять другую иконку в спрайте

Ну что-то такое background: url('тут sprite.svg#menu-white')

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

RAX7, спасибо большое

Буду разбираться

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

RAX7, а если у меня svg спрайт ?

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

RAX7, вот так не работает

$color-not-white: transparent;
color: $color-not-white

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

RAX7, а вот как в hover эффекте задать color: transparent ?

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

RAX7, спасибо большое

Очень сильно помогли

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

Спасибо большое

А вот hover как ?

<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"/>
        <g class="color-change">
            <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"/>
        </g>
    </symbol>
</svg>

Допустим для color-change добавить hover эффект

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

Рустам Байназаров, вот так ?

<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="#{$color-white}"/>
            <circle cx="19.5" cy="19.5" r="2.5" fill="#{$color-white}"/>
            <circle cx="19.5" cy="28.5" r="2.5" fill="#{$color-white}"/>
    </symbol>
</svg>

Но у меня спрайт находится в sprite.svg

Как сделать, чтобы фильтр не накладывался на другие блоки?

Volito, или bg-wrapper сделать в виде обводки ?

Допустим было так <div class="bg-wrapper"></div>

А сделать так:

<div class="bg-wrapper">
     <h1 class="title-head">Заголовок</h1>
</div>

Как сделать, чтобы фильтр не накладывался на другие блоки?

Volito, это для header фон

Как сделать, чтобы фильтр не накладывался на другие блоки?

Volito, спасибо

Т.е. overflow: hidden тогда не нужно было бы прописывать, а вот что насчет пустоты с точки зрения СЕО ?

Можно просто 0 поставить или все таки нужно переделывать верстку ?