inline-svg-template.mustache 850 Bytes
Newer Older
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
@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;
}

{{#svgs}}
${{{name}}}: '{{{inline}}}' {{width}} {{height}};
{{/svgs}}

@mixin inline-svg($name, $color: null) {
	@if ($color) {
		$color: str-replace($color + '', '#', '');
		background: transparent url(str-replace(nth($name, 1), '%23FFF', '%23' + $color)) no-repeat 50% 50%;
		color: $color;
	} @else {
		background: transparent url(nth($name, 1)) no-repeat 50% 50%;
	}
	background-size: 100%;
	width: nth($name, 2);
	height: nth($name, 3);
}

@function inline-svg-width($name) {
	@return nth($name, 2);
}

@function inline-svg-height($name) {
	@return nth($name, 3);
}