_lib.scss

//
// SVG Sass
// https://github.com/entozoon/svg-sass
// (Pasted rather than imported, as transient packages aren't doable yet)
//

//
// SVG Libraries
//
// str-replace
// Modified from https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: "", $special: false) {
  // NB: $special doesn't work for CRLF so yeah, don't
  $index-offset: if($special, -1, 0);
  $index: str-index($string, $search);
  @if $index {
    $index: $index + $index-offset;
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace
      );
  }
  @return $string;
}
// Debug thinking only:
// npm i sassdash
// @import "./node_modules/sassdash/index";

// SVG
// Encode SVG XML into as CSS-friendly format
// (requires str-replace, above)
//
// Usage, for content or background-image:
//   .foo {
//     content: svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
//      width="100%" viewBox="0 0 160 160">
//       <circle cx="80" cy="80" r="80" fill="red" />
//     </svg>'
//   );
//
@function svg($svg) {
  @if not function-exists(str-replace) {
    @error "You are missing the utility function 'str-replace', please copy it in!";
  }

  // Reveal the newlines characters (requires sassdash)! Turns out they're generally \a
  // $thinking: _split($svg, " ");
  // @debug $thinking;

  // Replace naughty newlines with spaces
  // LF encoding yields \a
  $svg: str-replace($svg, "\a", " ");
  // CRLF encoding yields \d (How did I know? Tried every damn char is how)
  $svg: str-replace($svg, "\d", " ");

  // Minify all whitespace to a max of one character (HTML style)
  @while (str-index($svg, "  ") != null) {
    $index: str-index($svg, "  ");
    $svg: "#{str-slice($svg, 0, $index - 1)} #{str-slice($svg, $index + 2)}";
  }

  // Encode into %3Csvg%20xmlns...
  $encoded: "";
  $slice: 2000;
  $index: 0;
  $loops: ceil(str-length($svg) / $slice);
  @for $i from 1 through $loops {
    $chunk: str-slice($svg, $index, $index + $slice - 1);
    // Replace various things so as to encode SVG XML for CSS
    $chunk: str-replace($chunk, '"', "'");
    $chunk: str-replace($chunk, "%", "%25");
    $chunk: str-replace($chunk, "#", "%23");
    $chunk: str-replace($chunk, "{", "%7B");
    $chunk: str-replace($chunk, "}", "%7D");
    $chunk: str-replace($chunk, "<", "%3C");
    $chunk: str-replace($chunk, ">", "%3E");
    $encoded: #{$encoded}#{$chunk};
    $index: $index + $slice;
  }

  // @debug $encoded;
  @return url("data:image/svg+xml,#{$encoded}");
}

//
// SVG Mixin
// Shorthand for function above. Applies to content by default
//
@mixin svg($svg, $attribute: content) {
  #{$attribute}: svg($svg);
}