How to make svg sprite friends with sass variables?

Question

css

Let's say we have an svg sprite

<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>

In sass, a variable is declared accordingly: $color-white: #fff
How can I pass a variable $color-whiteto svg?

Answer 1

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;
}