|
| 1 | +// stylelint-disable scss/operator-no-newline-after |
1 | 2 | @use 'sass:math'; |
2 | 3 | @use 'sass:string'; |
3 | 4 |
|
4 | | -@function string-replace($string, $search, $replace: '') { |
5 | | - $index: string.index($string, $search); |
6 | | - @return if( |
7 | | - $index, |
8 | | - string.slice($string, 1, $index - 1) + $replace + |
9 | | - string-replace( |
10 | | - string.slice($string, $index + string.length($search)), |
11 | | - $search, |
12 | | - $replace |
13 | | - ), |
14 | | - $string |
15 | | - ); |
16 | | -} |
17 | | - |
18 | | -@function svg-url($svg) { |
| 5 | +@function encode-svg($svg) { |
19 | 6 | $encoded: ''; |
20 | 7 | $slice: 2000; |
21 | 8 | $index: 0; |
22 | 9 | $loops: math.ceil(math.div(string.length($svg), $slice)); |
23 | 10 |
|
24 | 11 | @if not string.index($svg, xmlns) { |
25 | | - $svg: string-replace( |
26 | | - $svg, |
27 | | - '<svg', |
28 | | - '<svg xmlns="http://www.w3.org/2000/svg"' |
29 | | - ); |
| 12 | + $svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"'); |
30 | 13 | } |
31 | 14 |
|
32 | 15 | @for $i from 1 through $loops { |
33 | 16 | $chunk: string.slice($svg, $index, $index + $slice - 1); |
34 | | - $chunk: string-replace($chunk, '"', "'"); |
35 | | - $chunk: string-replace($chunk, '%', '%25'); |
36 | | - $chunk: string-replace($chunk, '#', '%23'); |
37 | | - $chunk: string-replace($chunk, '{', '%7B'); |
38 | | - $chunk: string-replace($chunk, '}', '%7D'); |
39 | | - $chunk: string-replace($chunk, '<', '%3C'); |
40 | | - $chunk: string-replace($chunk, '>', '%3E'); |
| 17 | + $chunk: str-replace($chunk, '"', "'"); |
| 18 | + $chunk: str-replace($chunk, '%', '%25'); |
| 19 | + $chunk: str-replace($chunk, '#', '%23'); |
| 20 | + $chunk: str-replace($chunk, '{', '%7B'); |
| 21 | + $chunk: str-replace($chunk, '}', '%7D'); |
| 22 | + $chunk: str-replace($chunk, '<', '%3C'); |
| 23 | + $chunk: str-replace($chunk, '>', '%3E'); |
41 | 24 | $encoded: #{$encoded}#{$chunk}; |
42 | 25 | $index: $index + $slice; |
43 | 26 | } |
44 | | - @return url('data:image/svg+xml,#{$encoded}'); |
| 27 | + |
| 28 | + @return url('data:image/svg+xml;utf8,#{$encoded}'); |
45 | 29 | } |
46 | 30 |
|
47 | 31 | @mixin background-svg($svg) { |
48 | | - background-image: svg-url($svg); |
| 32 | + background-image: encode-svg($svg); |
| 33 | +} |
| 34 | + |
| 35 | +@mixin mask-svg($svg, $color: currentColor) { |
| 36 | + background-color: $color; |
| 37 | + |
| 38 | + mask-image: encode-svg($svg); |
| 39 | + mask-position: 50%; |
| 40 | + mask-size: 1em; |
| 41 | + mask-repeat: no-repeat; |
| 42 | +} |
| 43 | + |
| 44 | +@function str-replace($string, $search, $replace: '') { |
| 45 | + $index: string.index($string, $search); |
| 46 | + |
| 47 | + @if $index { |
| 48 | + @return string.slice($string, 1, $index - 1) + $replace + |
| 49 | + str-replace( |
| 50 | + string.slice($string, $index + string.length($search)), |
| 51 | + $search, |
| 52 | + $replace |
| 53 | + ); |
| 54 | + } |
| 55 | + |
| 56 | + @return $string; |
49 | 57 | } |
0 commit comments