Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class='icon'></div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';

$icon-color: #f00;
$icon-color-hover: #00f;

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

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

    @return $string;
}

@function svg-fill ($svg, $color) {
  @return str-replace($svg, '<svg', '<svg fill="#{$color}"');
}

@function svg-size ($svg, $width, $height) {
  $svg: str-replace($svg, '<svg', '<svg width="#{$width}"');
  $svg: str-replace($svg, '<svg', '<svg height="#{$height}"');
  
  @return $svg;
}

.icon {
  $icon-svg: svg-size($circle-icon-svg, 20, 20);
  
  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color)}');
  
  &:hover {
    background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color-hover)}');
  }
}

SassMeister-output.css

.icon {
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;utf8,<svg fill="#f00" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>');
}

.icon:hover {
  background: url('data:image/svg+xml;utf8,<svg fill="#00f" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>');
}

SassMeister-rendered.html

<div class='icon'></div>