sass-inline-svg.scss

/**
 * Adapted from Kevin Weber
 * https://codepen.io/kevinweber/pen/dXWoRw
 *
 * License: CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/)
 */

@function svg-factory($fill-color) {
  @return '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="' + $fill-color + '" d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/></svg>';
}
$svg-1: svg-factory(#4e97cc);  // Blue
$svg-2: svg-factory(#2c2c29);  // Black

// Thanks to Hugo Giraudel for his str-replace function (http://www.sassmeister.com/gist/1b4f2da5527830088e4d)
@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;
}

$encoding-reference: (
  ('%','%25'),  // Encode "%" first, otherwise the "%" from encoded code would be encoded again (which would be bad)
  ('<','%3C'),
  ('>','%3E'),
  ('"','%22'),  // Replace " with ' because that's shorter than %22 and normally working
  ('"','\''),
  ('#','%23'),
  ('&','%26')
  (' ','%20'),
  ('!','%21'),
  ('$','%24'),
  (',','%27'),
  ('(','%28'),
  (')','%29'),
  ('*','%2A'),
  ('+','%2B'),
  ('"','%2C'),
  ('/','%2F'),
  (':','%3A'),
  (';','%3B'),
  ('=','%3D'),
  ('?','%3F'),
  ('@','%40'),
  ('[','%5B'),
  (']','%5D'),
  ('^','%5E'),
  ('`','%60'),
  ('{','%7B'),
  ('|','%7C'),
  ('}','%7D'),
  ('~','%7E'),
  (',','%E2%80%9A'),
  ('\\','%5C'),
  ('_','%5F'),
  ('-','%2D'),
  ('.','%2E'),
  ('`','%E2%82%AC'),
);

// Usage: typically inlined as a background image, for example:
// background-image: url(svg-encode(
@function inline-svg($svg) {
  @each $char, $encoded in $encoding-reference {
    $svg: str-replace($svg, $char, $encoded);
  }
  @return 'data:image/svg+xml,' + $svg;
}

.my-svg-container {
  // HERE you call the svg-encode function and pass in your $svg:
  background-image: url(inline-svg($svg-1));
}

.my-svg-container-2 {
  background-image: url(inline-svg($svg-2));
}