svgpack converts SVG files into SASS functions.
It optimizes and sanitizes the svg, extract its colors and generate a sass function with the colors as parameters. One or more svg can be packed into a scss file.
Advantages:
- Fewer requests for resources on the server.
- Less management problems with the assets of the css.
- The functions do not write anything in our css until they are used, which is perfect for using it internally in angular or react components.
- The same function can be used several times to change the colors.
- It is much faster to update all resources, save the svg again and execute the command.
npm:
npm install --global @marsbased/svgpack
yarn:
yarn global add @marsbased/svgpack
To get the latest version, clone the repository and install from it:
cd svgpack
npm install --global .
It accepts a folder and write the result in the standard output:
> svgpack my-icon-folder/
> svgpack my-icon-folder/ > icons.scss
Write svgpack --help for more options
Running svgpack against this svg file:
> svgpack test/assets/svgpack-imagotype.svg
outputs something like this:
@function svgpack-imagotype($color: #ef1625) {
$color: str-replace(inspect($color), "#", "%23"); //fix and replace hexcolor
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 90'%3E%3Cg fill='"+$color+"' fill-rule='evenodd'%3E%3Cpath ...");
}To use the sass function we only need to call them passing the desired color:
$color: #fff;
.svgpack-main-logo {
display: block;
width: 36rem;
height: 6rem;
background: svgpack-imagotype($color) center/contain no-repeat;
}
See this example in codepen
Run tests with yarn test or, if you have jest globally installed, just jest
You can run svgpack directly from the repository like this: ./bin/svgpack test/icons
MIT License