Skip to content

MarsBased/svgpack

Repository files navigation

svgpack

npm

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

youtube

See this example in codepen

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