diff --git a/README.md b/README.md
index 7b258a2..0d9f3d5 100644
--- a/README.md
+++ b/README.md
@@ -14,18 +14,26 @@ npm install gulp-sassvg --save-dev
```
var sassvg = require('gulp-sassvg');
-gulp.task('sassvg', function(){
- return gulp.src('./path/to/images/folder/**/*.svg')
- .pipe(sassvg({
- outputFolder: './sassvg/', // IMPORTANT: this folder needs to exist
- optimizeSvg: true // true (default) means about 25% reduction of generated file size, but 3x time for generating the _icons.scss file
- }));
+gulp.task('sassvg', function() {
+ return gulp.src('./path/to/images/folder/**/*.svg')
+ .pipe(sassvg({
+ outputFolder: './sassvg/', // IMPORTANT: this folder needs to exist
+ optimizeSvg: true // true (default) means about 25% reduction of generated file size, but 3x time for generating the _icons.scss file
+ }));
});
```
-##
+##
````scss
-@import "_sassvg.scss;
+@use "sassvg";
+
+.selector {
+ background-image: sassvg.sassvg('filename');
+}
+````
+or
+````scss
+@use "sassvg" as *;
.selector {
background-image: sassvg('filename');
@@ -34,24 +42,24 @@ gulp.task('sassvg', function(){
will generate
````css
.selector {
- background: url('data:image/svg+xml;utf8,');
+ background-image: url('data:image/svg+xml;utf8,');
}
````
````scss
-@import "_sassvg.scss;
+@use "sassvg" as *;
.selector {
- @sassvg('filename');
+ @include sassvg('filename');
}
````
will generate
````css
.selector {
- background: url('data:image/svg+xml;utf8,');
- background-position: 50%;
+ background-image: url('data:image/svg+xml;utf8,');
+ background-repeat: no-repeat;
+ background-position: 0 50%;
background-size: 2rem;
-
}
````
@@ -72,7 +80,7 @@ Documentation may be generated using sassdoc. Otherwise, just read the _sassvg.s
IT works in every browser supporting SVGs (basically IE9+ and Android 3+), detailled information may be found here: http://caniuse.com/#search=svg
**Performance?**
-Sassvg is blazingly fast. It's approximately 0.1ms/icon with libsass. So even if you have 100 different icons, the you will see the result after about 0.08-0.12 seconds.
+Sassvg is blazingly fast. It's approximately 0.1ms/icon with libsass. So even if you have 100 different icons, the you will see the result after about 0.08-0.12 seconds.
**What about the File Size?**
Make sure you serve the CSS-File gzipped (which should be standard nowadays on every server). Then your transfered file-size will be even **lower** than if you would serve them "normally" by referencing the background-images via url. How?
diff --git a/_sassvg.scss b/_sassvg.scss
index f1de914..8278701 100644
--- a/_sassvg.scss
+++ b/_sassvg.scss
@@ -4,43 +4,63 @@
/// @group sassvg
////
+@use "sass:color";
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+@use "sassvg-data" as *;
+
/// default color, if the sassvg() mixin gets no color parameter
/// you may redefine this value multiple times in your project (before including the mixin)
/// @type {color}
-/// @example
-/// $sassvg--color
-$sassvg--color: #000;
+/// @example
+/// @use "sassvg" with (
+/// $sassvg--color: blue
+/// );
+$sassvg--color: #000 !default;
/// defines whether the sassvg-function returns only the data string or the url as well
/// @type {Boolean}
/// @example - all these examples return the same (valid) css/svg
-/// $sassvg--url: true;
-/// background-image: sassvg("iconname", blue);
-///
-/// $sassvg--url: false;
-/// background-image: url(sassvg("iconname", blue));
-///
-/// $sassvg--url: false;
-/// background-image: sassvg("iconname", blue, $url: true);
-///
-/// $sassvg--url: true;
-/// background-image: url(sassvg("iconname", blue, $url:false));
-$sassvg--url: true;
-
-@import "sassvg-data";
+/// @use "sassvg" with (
+/// $sassvg--url: true
+/// ) as *;
+/// background-image: sassvg("iconname", blue);
+///
+/// @use "sassvg" with (
+/// $sassvg--url: false
+/// ) as *;
+/// background-image: url(sassvg("iconname", blue));
+///
+/// @use "sassvg" with (
+/// $sassvg--url: false
+/// ) as *;
+/// background-image: sassvg("iconname", blue, $url: true);
+///
+/// @use "sassvg" with (
+/// $sassvg--url: true;
+/// ) as *;
+/// background-image: url(sassvg("iconname", blue, $url:false));
+$sassvg--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" + round(alpha($color)) + "%29";
- }@else{
- @return "rgb%28" + round(red($color)) + "%2C" + round(green($color)) + "%2C" + round(blue($color)) + "%29";
+@function uri-encode-color($color) {
+ $red: math.round(color.channel($color, "red", $space: rgb));
+ $green: math.round(color.channel($color, "green", $space: rgb));
+ $blue: math.round(color.channel($color, "blue", $space: rgb));
+ $alpha: color.alpha($color);
+
+ @if $alpha != 1 {
+ @return "rgba%28" + $red + "%2C" + $green + "%2C" + $blue + "%2C" + $alpha + "%29";
+ } @else{
+ @return "rgb%28" + $red + "%2C" + $green + "%2C" + $blue + "%29";
}
}
-
/// creates a dynamic svg, e.g. colored
///
/// @param {filename} $icon - name of the @include icon
@@ -57,20 +77,20 @@ $sassvg--url: true;
///
/// @example
/// background-image: sassvg("iconname", blue);
-/// background-image: sassvg("facebook", #FFAFF );
-/// background-image: sassvg("arrow-left", rgba(224, 51, 224, 0.79));
+/// background-image: sassvg("facebook", #FFAFF);
+/// background-image: sassvg("arrow-left", rgba(224, 51, 224, 0.79));
///
/// @return {image} - (as data-string)
@function sassvg(
- $icon,
- $color: $sassvg--color,
+ $icon,
+ $color: $sassvg--color,
$fillcolor: $color,
- $strokecolor: $color,
+ $strokecolor: $color,
$opacity: 1,
$extrastyles: "",
$url: $sassvg--url
-){
- @if($opacity != 1){
+) {
+ @if $opacity != 1 {
$extrastyles: "opacity%3A" + $opacity + "%3B" + $extrastyles;
}
@@ -79,12 +99,11 @@ $sassvg--url: true;
$functionname: "sassvg-" + $icon;
//some sanity checks
- @if(type-of($icon) != "string" or type-of($color) != "color" or function-exists($functionname) == false){
+ @if meta.type-of($icon) != "string" or meta.type-of($color) != "color" or meta.function-exists($functionname) == false {
@warn "wrong parameter(s) for function 'sassvg'. The first one needs to be a string with the fileName of the svg (without extension)";
- }@else{
- @return unquote("url(" + call(get-function($functionname), $fillcolor, $strokecolor, $extrastyles) + ")");
+ } @else{
+ @return string.unquote("url(" + meta.call(meta.get-function($functionname), $fillcolor, $strokecolor, $extrastyles) + ")");
}
-
}
/// returns all sassvg-ed icons, optionally filtered by their folder
@@ -100,40 +119,39 @@ $sassvg--url: true;
/// }
///
/// @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 sassvg-list($folder: null){
- $iconlist: ();
- @each $key in map-keys($sassvg-map){
+@function sassvg-list($folder: null) {
+ $iconlist: ();
- @if(map-get(map-get($sassvg-map, $key), 'folder') == $folder){
- $iconlist: append($iconlist, unquote(map-get(map-get($sassvg-map, $key), 'name')));
+ @each $key in map.keys($sassvg-map) {
+ @if map.get(map.get($sassvg-map, $key), "folder") == $folder {
+ $iconlist: list.append($iconlist, string.unquote(map.get(map.get($sassvg-map, $key), "name")));
}
}
+
@return $iconlist;
}
// convenience mixin for creating a sassvg-icon with usefull default values
/// @param {filename} $icon - name of the icon
/// @param {color} $color - used for fill and stroke
-/// @param {background-position} $position - used for fill and stroke
+/// @param {background-position} $position - setting the background-position property
/// @param {background-size} $size - setting the background-size property
/// @param {background-repeat} $repeat - setting the background-repeat property
/// @param {color} $fillcolor - explicitly used only for fill attributes
/// @param {strokecolor} $strokecolor - explicitly used only for stroke attributes (if present)
/// @require {function} sassvg
/// @example scss
-///
/// .selector {
/// @include sassvg("filename", blue);
/// }
-///
+///
/// ...generates..
/// .selector {
/// background-image: url(data:image/svg+xml...);
@@ -144,18 +162,19 @@ $sassvg--url: true;
///
@mixin sassvg(
$icon,
- $color: $sassvg--color,
- $position: 0 50%,
- $size: 2rem 2rem,
- $repeat: no-repeat,
- $fillcolor: $color,
+ $color: $sassvg--color,
+ $position: 0 50%,
+ $size: 2rem 2rem,
+ $repeat: no-repeat,
+ $fillcolor: $color,
$strokecolor: $color
-) {
- background-image: sassvg($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;
+) {
+ @if meta.type-of($repeat) == string { $repeat: string.unquote($repeat); }
+ @if meta.type-of($position) == string { $position: string.unquote($position); }
+ @if meta.type-of($size) == string { $size: string.unquote($size); }
+
+ background-image: sassvg($icon, $color, $fillcolor, $strokecolor, $url: true);
+ background-repeat: $repeat;
+ background-position: $position;
+ background-size: $size;
}