SVG to Sass Variables

This is a bash script, that will make Sass variables from SVG files.

A use case could be, if you are using your SVGs inline. Look at the example in this link.

Make Variables

Run the bash script with arguments containing a path to an output file and an input directory.

./svg-to-sass-variable.sh ./output/file.scss input/

Use Variables

This is just an example of using variables with SVGs. There are probably many more.

The function is an example from this link.

...
@function inline-svg($string) {
    @return url('data:image/svg+xml,#{url-encode($string)}');
}

$svg-example: '<svg></svg>';

.icon {
    background-image: inline-svg($svg-example);
}