STACK-SVG
A Node module to convert icomoon symbol-defs.svg to an svg stack accessible with fragment identifiers for usage in img-src, background-image, mask-image,... Every SVG can be accessed, sized and colored separately.
Installation
First install the module globally with the following cli command in your favorite terminal:
npm i -g stack-svg
Usage
After installation you can convert your downloaded icomoon 'symbol-defs.svg' using the following command:
stack-svg ./symbol-defs.svg ./icons/icons.svg
sass mixin:
@mixin icon($id, $color: black, $size: 32px, $path: "/icons/icons.svg") {
width: $size;
height: $size;
-webkit-mask-image: url('#{$path}#{"#"}#{$id}');
mask-image: url('#{$path}#{"#"}#{$id}');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
background-color: $color;
}
sass usage:
&::after {
content: "";
@include icon("icon-chevron", #f00, 4.4rem);
}
'icon-chevron' is the name of the icon given by icomoon.
attention
Using live-server in vs-code breaks your svg's by injecting javascript inside your svg. This can be solved by using five-server instead of live-server.