icons

A custom SVG sprite library for When I Work. Produces individual optimized SVGs and an SVG sprite.

It also produces a gallery webpage where you can view all available icons.

Adding icons

Just add your individual SVG icons to the icons directory. The filename will be used as the sprite's ID.

Dynamic colors

In addition to any fixed colors, icons can have primary and secondary colors that can be changed with CSS.

• Any fills or strokes with the color #000000 (black) will be processed to use the primary color.
• Any fills with the color #555555 will be processed to use the secondary color. Note that this does not work for strokes.

Then simply apply CSS like the following:

.icon {
    color: red; /* primary color */
    fill: blue; /* secondary color */
}

If you want the secondary color to default to the primary color, use CSS like this:

.icon {
    fill: currentColor;
}

Installing

yarn install

Building

yarn run webpack

Running a local dev server

yarn run watch

Simply runs the Webpack dev server so you can see changes and new assets quickly.