Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="svg"></div>

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

$svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"><path fill="currentColor" stroke="blue" d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/></svg>';

$svg-list: (
  'heart.svg': $svg
);

@function svg-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + svg-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  
  @return $string;
}

@function svg($svg, $replacements) {
  @if map-has-key($svg-list, $svg) {
    $svg: map-get($svg-list, $svg);
  }
  
  @if $replacements and type-of($replacements) == map {
    @each $search, $replace in $replacements {
      $svg: svg-replace($svg, $search, $replace);
    }
  }
  
  // atob, encodeURIComponent
  @return url('data:image/svg+xml;utf8,#{$svg}');
}

.svg {
  background-size: contain;
  background-image: svg('heart.svg', ('currentColor': 'yellow', 'blue': 'green'));
  width: 48px;
  height: 48px;
}

SassMeister-output.css

.svg {
  background-size: contain;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"><path fill="yellow" stroke="green" d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/></svg>');
  width: 48px;
  height: 48px; }

SassMeister-rendered.html

<div class="svg"></div>