Skip to content

Fix Dart Sass deprecation warnings; update documentation. #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shderuiter wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix Dart Sass deprecation warnings; update documentation. #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
29c0b4a
Fix Dart Sass deprecation warnings; update documentation.
shderuiter Jan 14, 2025
81dd12a
Fix indentation.
shderuiter Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 23 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -34,24 +42,24 @@ gulp.task('sassvg', function(){
will generate
````css
.selector {
background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
background-image: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}
````

````scss
@import "_sassvg.scss;
@use "sassvg" as *;

.selector {
@sassvg('filename');
@include sassvg('filename');
}
````
will generate
````css
.selector {
background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
background-position: 50%;
background-image: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
background-repeat: no-repeat;
background-position: 0 50%;
background-size: 2rem;

}
````

Expand All @@ -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?
Expand Down
133 changes: 76 additions & 57 deletions _sassvg.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
}

Expand All @@ -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
Expand All @@ -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...);
Expand All @@ -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;
}