From 29c0b4aeba192a7b4b5df0a166b894ca94fc1ea0 Mon Sep 17 00:00:00 2001 From: Saskia de Ruiter Date: Tue, 14 Jan 2025 15:44:54 +0100 Subject: [PATCH 1/2] Fix Dart Sass deprecation warnings; update documentation. --- README.md | 38 +++++++++------ _sassvg.scss | 127 +++++++++++++++++++++++++++++---------------------- 2 files changed, 96 insertions(+), 69 deletions(-) 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..95905a4 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,17 +162,18 @@ $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); } +) { + @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; From 81dd12ad6d505483a98763f3d7b99eb37ed70078 Mon Sep 17 00:00:00 2001 From: Saskia de Ruiter Date: Tue, 14 Jan 2025 18:05:13 +0100 Subject: [PATCH 2/2] Fix indentation. --- _sassvg.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/_sassvg.scss b/_sassvg.scss index 95905a4..8278701 100644 --- a/_sassvg.scss +++ b/_sassvg.scss @@ -169,12 +169,12 @@ $sassvg--url: true !default; $fillcolor: $color, $strokecolor: $color ) { - @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); } + @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; + background-repeat: $repeat; + background-position: $position; + background-size: $size; }