-
Notifications
You must be signed in to change notification settings - Fork 6
/
_sass-inline-svg.scss
170 lines (158 loc) · 5.56 KB
/
_sass-inline-svg.scss
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
////
/// Functions and mixins for gulp-sass-inline-svg based on gulp-sassvg
/// @author David Mosemann
/// @group gulp-sass-inline-svg
/// @see https://github.com/MattDiMu/gulp-sassvg
////
// Import the generated inline svgs sass functions
@import "sass-inline-svg-data";
/// default color, if the inline-svg() mixin gets no color parameter
/// @type {color}
$SVG-COLOR: null !default;
/// defines whether the inline-svg() function returns only the data string or the url as well
/// @type {Boolean}
/// @example - all these examples return the same (valid) css/svg
/// $SVG-URL: true;
/// background-image: inline-svg("iconname", blue);
///
/// $SVG-URL: false;
/// background-image: url(inline-svg("iconname", blue));
///
/// $SVG-URL: false;
/// background-image: inline-svg("iconname", blue, $url: true);
///
/// $SVG-URL: true;
/// background-image: url(inline-svg("iconname", blue, $url:false));
$SVG-URL: true !default;
/// returns an uri-encoded color value
/// if possible, the color is reduced to rgb, otherwise rgba
/// @return {color} (uri-encoded)
@function uri-encode-color($color){
@if(alpha($color) != 1){
@return "rgba%28" + round(red($color)) + "%2C" + round(green($color)) + "%2C" + round(blue($color)) + "%2C" + (alpha($color)) + "%29";
}@else{
@return "rgb%28" + round(red($color)) + "%2C" + round(green($color)) + "%2C" + round(blue($color)) + "%29";
}
}
/// creates an inline svg. Black fill and strokes can by dynaically assigned a
/// different color
///
/// @param {filename} $icon - name of the svg file
/// @param {color} $color - color used for both black fill and stroke attributes
/// @param {color} $fillcolor - color for black fill attributes
/// @param {color} $strokecolor - color for black stroke attributes
///
/// @throws warning if color value is not a valid color (hex, rgb, rgba)
/// @require {variable} $SVG-COLOR
/// @require {variable} $SVG-URL
/// @require {function} uri-encode-color
///
/// @example
/// background-image: inline-svg("iconname", blue);
/// background-image: inline-svg("facebook", #FFAFF );
/// background-image: inline-svg("arrow-left", rgba(224, 51, 224, 0.79));
///
/// @return {image} - uri encoded svg to be used as a background-url
@function inline-svg(
$icon,
$color: $SVG-COLOR,
$fillcolor: $color,
$strokecolor: $color,
$url: $SVG-URL
){
$functionname: $icon;
//some sanity checks
@if(type-of($icon) != "string"){
@warn "Could not find '#{$icon}', either the svg file does not exist or the name was mispelled.";
} @else if (function-exists($functionname) == false) {
@warn "Function '#{$icon}' does not exist.";
} @else{
@if(type-of($color) == "color"){
$fillcolor: uri-encode-color($fillcolor);
$strokecolor: uri-encode-color($strokecolor);
} @else if ($color == null){
$fillcolor: null;
$strokecolor: null;
}@else {
$fillcolor: uri-encode-color(#000);
$strokecolor: uri-encode-color(#000);
@warn "Color value is not valid, defaulting to #000. You can use 'null' to use the svg's original color";
}
$uri-string: call(get-function($functionname), $fillcolor, $strokecolor);
@if $url {
@return url($uri-string);
} @else {
@return $uri-string;
}
}
}
/// returns all icons passed into gulp-sass-inline-svg, optionally filtered by their folder
/// @param {folder} [$folder] - only return the icons in a particular folder
/// @return {list} - a list of icon-names, which may be used by the inline-svg() function
/// @example scss - in case you have 2 icons (facebook.svg and twitter.svg) in your folder "social"
/// $folder: "social";
/// @each $icon in svg-list($folder){
/// $data: inline-svg($icon, #1a1ab4);
/// .#{$folder}-#{$icon} {
/// background-image: url(#{$data});
/// }
/// }
///
/// @example css - then it will generate css like this
///
/// .social-facebook {
/// background-image: url(data:image/svg+xml...);
/// }
/// .social-twitter {
/// background-image: url(data:image/svg+xml...);
/// }
///
@function svg-list($folder: null){
$iconlist: ();
@each $key in map-keys($svg-map){
@if(map-get(map-get($svg-map, $key), 'folder') == $folder){
$iconlist: append($iconlist, unquote(map-get(map-get($svg-map, $key), 'name')));
}
}
@return $iconlist;
}
/// convenience mixin for creating a svg icon with usefull default values
/// @param {filename} $icon - filename of the svg icon
/// @param {color} $color - color to apply to black fills and strokes
/// @param {background-position} $position - sets the background position
/// @param {background-size} $size - sets the background-size property
/// @param {background-repeat} $repeat - sets the background-repeat property
/// @param {color} $fillcolor - color to apply to black fill attributes
/// @param {strokecolor} $strokecolor - color to apply to black stroke attributes
/// @require {function} inline-svg
/// @example scss
///
/// .icon-selector {
/// @include inline-svg-icon("filename", blue);
/// }
///
/// ...generates..
/// .selector {
/// background-image: url("data:image/svg+xml...");
/// background-repeat: no-repeat;
/// background-position: 0 50%;
/// background-size: 2rem;
/// }
///
@mixin inline-svg-icon(
$icon,
$color: $SVG-COLOR,
$position: 0 50%,
$size: 2rem 2rem,
$repeat: no-repeat,
$fillcolor: $color,
$strokecolor: $color
) {
background-image: inline-svg($icon, $color, $fillcolor, $strokecolor, $url: true);
@if(type-of($repeat) == string) { $repeat: unquote($repeat); }
@if(type-of($position) == string) { $position: unquote($position); }
@if(type-of($size) == string) { $size: unquote($size); }
background-repeat: $repeat;
background-position: $position;
background-size: $size;
}