Skip to content
Convert svg files into sass functions
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin Optimize and pack commands for individual files. Related to #1 Sep 28, 2018
.eslintrc.json Optimize and pack commands for individual files. Related to #1 Sep 28, 2018
LICENSE Create (#5) Oct 23, 2018
package.json bug with SVG complexes, removed removeAttrs XMLNS Apr 2, 2019
yarn.lock Add lodash dependency (#8) Oct 26, 2018



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.


  • 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 install --global @marsbased/svgpack


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='' 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

Codepen example with icons

Codepen example multicolor


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

You can’t perform that action at this time.