Generated by SassMeister.com.

input.scss

/// Replace `$search` with `$replace` in `$string`
/// @group Utilities
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
/// @link http://sassmeister.com/gist/1b4f2da5527830088e4d
/// @link http://hugogiraudel.com/2014/01/13/sass-string-replacement-function/
///
/// @example scss
///   fs-str-replace("abcde", "bc", "a") => "aade"
///
@function fs-str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

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

  @return $string;
}

/// URL-encode string
/// @access private
/// @param {String} $string - String to encode
/// @return {String} - URL-encoded string
/// @require {variable} $fs-escape-chars
/// @require {function} fs-str-replace
///
@function fs-url-encode($string) {
  @each $char, $code in $fs-escape-chars {
    $string: fs-str-replace($string, $char, $code);
  }
  @return $string;
}

/// Characters to escape from SVGs
/// @access private
/// @type Map
/// @ignore Symbol reference http://www.w3schools.com/tags/ref_urlencode.asp
/// @ignore Note: gulp-minify-css (which uses clean-css) isn’t applying config options correctly causing data URLs to not be wrapped in quote, so we have to convert double quotes (") to percent encoded symbols.
$fs-escape-chars: (
  '"': '\'',
  '%': '%25',
  '#': '%23',
  '<': '%3C',
  '>': '%3E',
);
// Only add additional characters if necessary
// (e.g. if SVG contains inline styles or CSS)
//-------------------------------------------
// '(': '%28',
// ')': '%29',
// '/': '%2F',
// ':': '%3A',
// ';': '%3B',
// '=': '%3D',
// '?': '%3F',
// '@': '%40',
// '\\': '%5C',
// '^': '%5E',
// '`': '%60',
// '{': '%7B',
// '|': '%7C',
// '}': '%7D',
// These shouldn’t be necessary, just here for reference
// ' ': '%20',
// '\'': '%22',
// '"': '%27',

/// SVG icons
/// @access private
/// @type Map
$fs-svgs: (
  'chevDown': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 10" preserveAspectRatio="xMidYMid meet"><path d="M12 0l2 2-7 7.1-7-7L2-.1l5 5z"/></svg>'
);

/// @group Main
/// Inline SVG for background-image
/// @param {String} $name - SVG name
/// @param {Map} $props - SVG attributes
/// @return {String} - Inline SVG as url("data:image/svg+xml,…")
/// @link https://www.sassmeister.com/gist/c2f12e64b242469d728f335ed612ae35
/// @link https://css-tricks.com/probably-dont-base64-svg/
/// @link https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
/// @link https://codepen.io/jakob-e/pen/doMoML
/// @link https://yoksel.github.io/url-encoder/
@function fs-svg-url($name, $props: false, $svg-map: $fs-svgs) {
  @if not $svg-map {
    @error '🔴  $fs-svgs map doesn’t exist';
    @return false;
  }

  @if not type-of($svg-map) == 'map' {
    @error '🔴  $svg-map isn’t a valid Sass map';
    @return false;
  }

  @if not map-has-key($svg-map, $name) {
    @error '🔴  icon “#{$name}” not found in $svg-map';
    @return false;
  }

  $svg: map-get($svg-map, $name);

  // Add custom properties
  @if $props {
    $props-string: '';
    @each $key, $val in $props {
      $props-string: $props-string + " #{$key}='#{$val}'";
    }
    $svg: fs-str-replace($svg, '<svg', '<svg' + $props-string);
  }

  @return url("data:image/svg+xml,#{unquote(fs-url-encode($svg))}");
}

//------------------------------------------------------------------------
// Example
//------------------------------------------------------------------------
.foo {
  background-image: fs-svg-url('chevDown', (fill: red));
}

.bar {
  background-image: fs-svg-url('chevDown', (fill: none, stroke: red, stroke-width: 1px));
}

output.css

.foo {
  background-image: url("data:image/svg+xml,%3Csvg fill='red' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M12 0l2 2-7 7.1-7-7L2-.1l5 5z'/%3E%3C/svg%3E");
}

.bar {
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='red' stroke-width='1px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M12 0l2 2-7 7.1-7-7L2-.1l5 5z'/%3E%3C/svg%3E");
}

settings.json

{
  "sass": {
    "compiler": "Ruby Sass/3.7.4",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}