もうちまちま矢印画像を書き出したくない人へ送るSCSS

demo

https://jsfiddle.net/ichi404/0xwbozvu/
CodePenだとSVGの書き出し周りがなんか上手くいかない。

やってること

矢印のSVGを動的に生成してbase64エンコードして出力する。

メリット

いちいちSVGを書き出さなくてもコード上で完結する。
色や大きさなどの変更が楽。

デメリット

埋め込みなのでファイルとして使いまわし出来ない。
めちゃくちゃ厳密にデザインを再現したい場合は難しい。角度とか。

コード

getArw.scss

/// getArw - 色/太さ/向きを指定した矢印型svgのURLを返します
/// @param {String} $color - 変更したい色（rgba非対応）
/// @param {String} $weight - 表示される矢印の太さ（light/medium/bold/bla）
/// @param {String} $rotate - 矢印の向き（top/bottom/left/right）
/// @param {String} $round - 角丸にするかどうか
/// @return {String} - 画像URL
@function getArw($color: #000000, $weight:medium, $rotate: bottom, $round: false){
  $size: (
    'light':    39.47,
    'medium':   40.88,
    'bold':   42.29,
    'bla':    45.1
  );

  $color: convertcolorcode($color);
  $stroke: "";
  $canvas: map-get($size, $weight);
  $canvas_s: 0;
  $translate_x: 0;
  $translate_y: 0;
  @if $rotate == right {
    $rotate : 90;
    $translate_x: map-get($size, $weight)/6*-1;
    @if $round{
        $translate_x: ($translate_x)-4;
        $translate_y: ($translate_y)+4;
    }
  }@else if $rotate == left{
    $rotate : -90;
    $translate_x: map-get($size, $weight)/6;
    @if $round{
      $translate_x: ($translate_x)+4;
      $translate_y: ($translate_y)-4;
    }
  }@else if $rotate == bottom{
    $rotate : 180;
    $translate_y: (-1*map-get($size, $weight))/6;
    @if $round{
      $translate_x: ($translate_x)-4;
      $translate_y: ($translate_y)-4;
    }
  }@else if $rotate == top{
    $rotate: 0;
    $translate_y: (1*map-get($size, $weight))/6;
    @if $round{
      $translate_x: ($translate_x)+4;
      $translate_y: ($translate_y)+4;
    }
  }

  @if $round {
    $stroke: "stroke='#{$color}' stroke-linejoin='round' stroke-linecap='round' stroke-width='#{$round}'";
    $canvas: $canvas+8;
  }
  $translate: translate($translate_x, $translate_y);
  @if $weight == light{
    @if $round {
      @return url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='#{$canvas}' height='#{$canvas}' viewBox='0 0 #{$canvas} #{$canvas}'%3E%3Cpath fill='#{$color}' transform='#{$translate}rotate(#{$rotate} #{$canvas/2} #{$canvas/2})' #{$stroke} d='M.29,19.85h0a1,1,0,0,1,0-1.41L18.63.29A1,1,0,0,1,20,.29l18.3,18.15a1,1,0,0,1,0,1.41h0a1,1,0,0,1-1.42,0L20,3.1a1,1,0,0,0-1.41,0L1.7,19.86A1,1,0,0,1,.29,19.85Z'/%3E%3C/svg%3E");
    }@else{
      @return url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='#{$canvas}' height='#{$canvas}' viewBox='0 0 #{$canvas} #{$canvas}'%3E%3Cpolygon fill='#{$color}' transform='#{$translate}rotate(#{$rotate} #{$canvas/2} #{$canvas/2})' #{$stroke}  points='M.58,20.86h0A2,2,0,0,1,.59,18L18.22.58A2,2,0,0,1,21,.58L38.63,18a2,2,0,0,1,0,2.82h0a2,2,0,0,1-2.82,0L21,6.21a2,2,0,0,0-2.81,0L3.4,20.87A2,2,0,0,1,.58,20.86Z'/%3E%3C/svg%3E");
    }
  }@else if $weight == medium{
    @if $round {
      @return url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='#{$canvas}' height='#{$canvas}' viewBox='0 0 #{$canvas} #{$canvas}'%3E%3Cpath fill='#{$color}' transform='#{$translate}rotate(#{$rotate} #{$canvas/2} #{$canvas/2})' #{$stroke} d='M.58,20.86h0A2,2,0,0,1,.59,18L18.22.58A2,2,0,0,1,21,.58L38.63,18a2,2,0,0,1,0,2.82h0a2,2,0,0,1-2.82,0L21,6.21a2,2,0,0,0-2.81,0L3.4,20.87A2,2,0,0,1,.58,20.86Z'/%3E%3C/svg%3E");
    } @else {
      @return url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='#{$canvas}' height='#{$canvas}' viewBox='0 0 #{$canvas} #{$canvas}'%3E%3Cpolygon fill='#{$color}' transform='#{$translate}rotate(#{$rotate} #{$canvas/2} #{$canvas/2})' #{$stroke} points='2.81 23.09 0 20.25 20.45 0 40.88 20.25 38.06 23.09 20.45 5.63 2.81 23.09'/%3E%3C/svg%3E");
    }
  }@else if $weight == bold{
    @if $round {
      @return url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='#{$canvas}' height='#{$canvas}' viewBox='0 0 #{$canvas} #{$canvas}'%3E%3Cpath fill='#{$color}' transform='#{$translate}rotate(#{$rotate} #{$canvas/2} #{$canvas/2})' #{$stroke} d='M.87,21.85h0a3,3,0,0,1,0-4.24L17.8.87A3,3,0,0,1,22,.87L38.91,17.6a3,3,0,0,1,0,4.25h0a3,3,0,0,1-4.24,0L22,9.32a3,3,0,0,0-4.22,0L5.11,21.87A3,3,0,0,1,.87,21.85Z'/%3E%3C/svg%3E");
    } @else {
      @return url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='#{$canvas}' height='#{$canvas}' viewBox='0 0 #{$canvas} #{$canvas}'%3E%3Cpolygon fill='#{$color}' transform='#{$translate}rotate(#{$rotate} #{$canvas/2} #{$canvas/2})' #{$stroke}  points='4.22 25.21 0 20.94 21.15 0 42.29 20.94 38.06 25.2 21.15 8.45 4.22 25.21'/%3E%3C/svg%3E");
    }
  }@else if $weight == bla{
    @if $round {
      @return url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='#{$canvas}' height='#{$canvas}' viewBox='0 0 #{$canvas} #{$canvas}'%3E%3Cpath fill='#{$color}' transform='#{$translate}rotate(#{$rotate} #{$canvas/2} #{$canvas/2})' #{$stroke} d='M1.45,23.85h0a5,5,0,0,1,0-7.07L17,1.45a5,5,0,0,1,7,0L39.48,16.78a5,5,0,0,1,0,7.07h0a5,5,0,0,1-7.07,0L24,15.52a5,5,0,0,0-7,0L8.52,23.89A5,5,0,0,1,1.45,23.85Z'/%3E%3C/svg%3E");
    } @else {
      @return url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='#{$canvas}' height='#{$canvas}' viewBox='0 0 #{$canvas} #{$canvas}'%3E%3Cpolygon fill='#{$color}' transform='#{$translate}rotate(#{$rotate} #{$canvas/2} #{$canvas/2})' #{$stroke}  points='7.04 29.44 0 22.34 22.56 0 45.1 22.34 38.06 29.44 22.56 14.07 7.04 29.44'/%3E%3C/svg%3E");
    }
  }
}


//色変換
@function convertcolorcode($color){
  @if $color == white{
    @return '%23ffffff';
  }@else if $color == black{
    @return '%23000000';
  }@else{
    @return str-replace(#{$color}, '#', '%23');
  }
}


/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@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;
}

使い方

index.scss

.link--arw {
    display: inline-flex;
    &:before {
            content: "";
            display: inline-block;
            height: 25px;
            width: 25px;
            background-image: getArw(#好きな色, bold, left, 2);
            background-size: contain;
            background-position: center;
            margin-right: 8px;
    }
}