////
/// @group Main
////
@use "sass:map";
@use "sass:string";
@use "str-replace" as *;
@use "url-encode" as *;

/// Inline SVG in url() for background-image
/// @param {String} $svg - SVG markup
/// @param {Map} $props - SVG attributes
/// @return {String} - Inline SVG as url("data:image/svg+xml,…")
/// @require {variable} $escape-chars
/// @require {function} str-replace
/// @require {function} url-encode
/// @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/
/// @link https://www.sassmeister.com/gist/594de57bc18015df9dc568e96aff9075
/// @example scss
///   .foo {
///     background-image: svg-url('chevDown', (fill: none, stroke: red, stroke-width: 1px));
///   }
@function svg-url($svg, $props: false,) {
  // Add custom properties
  @if $props {
    $props-string: '';

    // Generate string of props
    @each $key, $val in $props {
      $props-string: $props-string + " #{$key}='#{$val}'";
    }

    // Add props string to SVG
    $svg: str-replace($svg, '<svg', '<svg' + $props-string);
  }

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