【SASS/SCSS】background-imageでsvg色の変更
svgファイル（アイコンなど）をbackground-imageで使いつつ、色（fill=”#色”）の変更もcss（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;で。