forked from plugn/gulp-inline-svg
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpaint-background.mustache
58 lines (47 loc) · 1.22 KB
/
paint-background.mustache
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
$svgIcons:(
{{#svgs}}
'{{name}}': '{{{inline}}}' {{width}} {{height}},
{{/svgs}}
);
@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;
}
@function svg-paint($svg, $options) {
$stroke: map-get($options, 'stroke');
@if $stroke {
$stroke: str-replace('' + $stroke, '#', '%23');
} @else {
$stroke: transparent;
}
$fill: map-get($options, 'fill');
@if $fill {
$fill: str-replace('' + $fill, '#', '%23');
} @else {
$fill: none;
}
$str: str-slice($svg, 1);
$filled: str-replace($str, '%23FFFFFF', $fill);
$final: str-replace($filled, '%23000000', $stroke);
@return url($final);
}
@function get-item($name) {
@return map-get($svgIcons, $name);
}
@function get-icon($name) {
$item: get-item($name);
@return nth($item, 1);
}
@mixin inline-svg($name, $options:()) {
background: transparent svg-paint(get-icon($name), $options) no-repeat 50% 50%;
width: nth(get-item($name), 2);
height: nth(get-item($name), 3);
}
.bg-paint-sample {
@include inline-svg('share', ('fill':#00f, 'stroke': blue));
}