Как вставить svg в переменную SASS(SCSS)?

Question

[Александр Присяжнюк]

Вопрос довольно простой и глупый, но найти ответа на него я так и не смог самостоятельно(гуглил, подбирал значения, сидел с томным видом за размышлениями о смысле жизни svg).

Недавно я начал ознакамливаться с svg и бороздя просторы интернета, нашел неплохую функцию для преобразования svg кодировки в URL. Все это нужно, очевидно, для сокращения http request-ов на странице и всеми любимой автоматизации.

Ниже прилагаю код функции:

@function svg-url($svg) {
  $encoded: '';
  $slice: 2000;
  $index: 0;
  $loops: ceil(str-length($svg)/$slice);
  @for $i from 1 through $loops {
    $chunk: str-slice($svg, $index, $index + $slice - 1);

    $chunk: str-replace($chunk, '"', '\'');
    $chunk: str-replace($chunk, '%', '%25');
    $chunk: str-replace($chunk, '&', '%26');
    $chunk: str-replace($chunk, '#', '%23');
    $chunk: str-replace($chunk, '{', '%7B');
    $chunk: str-replace($chunk, '}', '%7D');
    $chunk: str-replace($chunk, '<', '%3C');
    $chunk: str-replace($chunk, '>', '%3E');

    $encoded: #{$encoded}#{$chunk};
    $index: $index + $slice;
  }
  // sass-lint:disable quotes
  @return url("data:image/svg+xml;utf-8,#{$encoded}");
  // sass-lint:enable quotes
}

@mixin background-svg($svg) {
  background-image: svg-url($svg);
}

SVG код нужно вставить в переменную $svg, в этом и заключается мой глупый вопрос, собственно как это сделать?

Как бы я это не делал - не выходит, скорее всего это просто, но с нами частенько бывает, что пишешь сложный код, а впадаешь в тупняк на такой простой вещи...

Как это должно выглядеть в итоге:


В коде:


Еще раз прошу прощение за глупый вопрос, и заранее спасибо)

Answer 1

[Вероника]

https://codepen.io/kevinweber/pen/dXWoRw

Не знаю как это работает, но попробовать можно :))

Answer 2

[foronlyfriends]

$sort: '%3Csvg ...

background-image: url("data:image/svg+xml, #{$sort}");