1.0.3 • Published 5 years ago
@marsbased/svgpack v1.0.3
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.
Install
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 .
CLI Usage
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
SCSS Usage
Simple example
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;
}
SVG to SCSS
See this example in codepen
Codepen example with icons
Codepen example multicolor
Test
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
License
MIT License