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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
bin Optimize and pack commands for individual files. Related to #1 Sep 28, 2018
docs
src
test
.eslintrc.json Optimize and pack commands for individual files. Related to #1 Sep 28, 2018
.gitignore
CODE_OF_CONDUCT.md
LICENSE
PULL_REQUEST_TEMPLATE.md Create PULL_REQUEST_TEMPLATE.md (#5) Oct 23, 2018
README.md
package.json bug with SVG complexes, removed removeAttrs XMLNS Apr 2, 2019
yarn.lock Add lodash dependency (#8) Oct 26, 2018

README.md

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

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

You can’t perform that action at this time.