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='https://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