Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
bin
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

Codepen example with icons

Codepen example multicolor

Codepen icons text color

Codepen mask background

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