README.md

Так выглядит спрайт

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="faq-v3-ico-3" viewBox="0 0 31 30">
    <circle fill="var(--color)" cx="15.4" cy="15" r="15" />
    <path fill="var(--color-inverse)" d="M6.4 12c0-.1.04-.18.1-.26a.35.35 0 0 1 .26-.1h4.9c.1 0 .19-.04.26-.12a.35.35 0 0 0 .11-.25v-4.9c0-.1.04-.19.11-.26A.35.35 0 0 1 12.4 6h6c.1 0 .18.04.25.11.08.07.11.16.11.26v4.9c0 .1.04.18.11.25.08.08.16.11.26.11h4.9c.1 0 .19.04.26.11.07.08.1.16.1.26v6c0 .1-.03.18-.1.26a.35.35 0 0 1-.26.1h-4.9c-.1 0-.18.04-.26.12a.35.35 0 0 0-.1.25v4.9c0 .1-.04.19-.12.26a.35.35 0 0 1-.25.11h-6a.35.35 0 0 1-.26-.11.35.35 0 0 1-.1-.26v-4.9c0-.1-.04-.18-.12-.25a.35.35 0 0 0-.25-.11h-4.9a.35.35 0 0 1-.26-.11.35.35 0 0 1-.11-.26v-6Z" />
  </symbol>
</svg>

Можно использовать спрайт в html

<svg class="icon">
  <use xlink:href="#faq-v3-ico-3"></use>
</svg>

Можно в отдельном файле

<svg class="icon">
  <use xlink:href="/assets/icons/arrow.svg#faq-v3-ico-3"></use>
</svg>

Чтобы менять цвет (fill) спрайта в css

Надо убрать fill из того значка в спрайте, цвет которого требуется менять в стилях через свойство fill.

&.active {
  .icon {
    --color-inverse: #00A550; 
    --color: #fff; 
  }
}

.icon {
  --color-inverse: #fff; 
  --color: #9CA9B5; 
}

Генератор svg спрайта (sprite)

https://svgsprit.es/

Ошибки

Не работают градиенты из с ссылками на их id

Это может быть когда на sprite (контейнер) svg ставится style="display: none;" - тогда градиенты пропадают при подключении спрайта.