0 0

svgファイル(アイコンなど)をbackground-imageで使いつつ、色(fill=”#色”)の変更もcss(sass/scss)で変更。

background-imageでsvg色の変更【SASS/SCSS】

2種類の書き方の覚書

【共通】

置換に関する部分のscss(bootstrapの_functions.scssを使っている場合は不要 ※_functions.scss内に同じ記述があるので)

@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;
}

urlエンコード用のscss

@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}

●【ひとつめ】アイコンのスタイルにsvgのタグをそのまま挿入※色の部分を変数で指定(.scss)
bootstrapのscss(_variables.scss)を使っている場合、’ + $icon-color1 + ‘の部分を、’ + $primary + ‘のように書くのもOK。

//function
@function bg-svg($string) {
  @return url('data:image/svg+xml;charset=utf8,#{url-encode($string)}');
}

//variable
$icon-color1: #CCC;
$icon-color2: #555;

//style
.icon-view {
  background-image: bg-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path fill="' + $icon-color1 + '" d="M16,0.5v3.1c7,0,12.6,5.7,12.6,12.6c0,7-5.7,12.6-12.6,12.6S3.4,23.2,3.4,16.3c0-3,1-5.8,2.9-8.1l0.5,1.3 c0.3,0.8,1.1,1.2,1.5,0.7l5.3-6.5c0.5-0.6,0-2-0.8-2.2L4.5,0c-0.6-0.1-1,0.7-0.7,1.5l1.3,3.4C5,5,5,5.1,4.9,5.2 c-3,3-4.6,6.9-4.6,11.1C0.3,24.9,7.3,32,16,32s15.7-7.1,15.7-15.7C31.7,7.6,24.7,0.5,16,0.5z"/><path fill="' + $icon-color2 + '" d="M6.3,13.6L14,18l0.1-0.2c0.4,0.7,1.1,1.2,2,1.2c1.1,0,2-0.7,2.2-1.7l8.3-6.1l-1.5-2l-7.9,5.7 c-0.3-0.2-0.7-0.3-1.2-0.3c-0.5,0-0.9,0.2-1.3,0.4l-6.9-4L6.3,13.6z"/></g></svg>');
  @include inline-block;
  width: 50px;
  height: 50px;
}

●【ふたつめ】mixinにて。@includeでsvgのd=”この部分”を挿入、サイズ、色指定(.scss)※pathがひとつの場合にしか対応していません。

//mixin
@mixin restylable-svg($encodedpath, $width, $height, $fill_color:black, $stroke_color:false, $stroke_width:1, $prop:'background-image') {
  $svgdata:'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 ' + $width + ' ' + $height + '" style="enable-background:new 0 0 ' + $width + ' ' + $height + ';" xml:space="preserve"><path d="';
  $stroke_attr: '';
  @if $stroke_color != false {
    $stroke_attr: ' stroke="' + $stroke_color + '" ' + ' stroke-width="' + $stroke_width + '" ';
  }
  $svgdata: $svgdata + $encodedpath + '"' + $stroke_attr + ' fill="' + $fill_color + '"/></svg>';
  #{$prop}: url('data:image/svg+xml;charset=utf8,#{url-encode($svgdata)}');
}

//style
.icon-undo {
  @include restylable-svg('M6.616,15.897c0-0.682,0.261-1.363,0.781-1.885L20.629,0.78c1.042-1.04,2.729-1.04,3.769,0 c1.042,1.042,1.042,2.729,0,3.77L13.051,15.897l11.553,11.554c1.04,1.039,1.04,2.727,0,3.768c-1.041,1.041-2.729,1.041-3.769,0 L7.397,17.781C6.877,17.262,6.616,16.58,6.616,15.897', 32, 32, #ff0000);
  @include inline-block;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: center;
}

※@include inline-block; は、compassをインストールしている場合に使えます。
compassをインストールしていない場合は、普通にdisplay: inline-block;で。

参考
https://bit.ly/2OolYLw, https://bit.ly/2Ak6kO9

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

コメントを残す

メールアドレスが公開されることはありません。