Icon sprite generator

About this plugin

What does it even do?

Creating an SVG sprite for a set of system icons can be kind of difficult and often involve stringing multiple services together to achieve the desired result. So this is the problem this plugin aims to solve. One place to target, optimize and export a bunch of icons as one unified SVG sprite.

How to use?

The UI is broken up into a few different blocks, each with it's own impact on the SVG output.

// Target method

The target method is the way in which you specify which frames/icon you want to be included in your SVG sprite.

Current selection - This method allows you to manually select the individual frames you want to be included in the sprite output.

Layer key - This method allows you to specify a key word that may be included across multiple layer/frame names and will target every node with key word as a part of its name.

// Symbol colour

Every icon set is different and you may want your icons to be a specific colour, or to inherit their colour from their context, or you might just want to not specify a colour at all!

Inherit colour - Will use "currentcolor" in place of path and fill colours.

Custom colour - Allows you to override any existing path/fill colours with a custom hex/rgb/hsl.

Unset - Does nothing at all with the symbol colours!

// Symbol dimensions

By default the dimensions are set to the most common icon size (24px by 24px), which is also the current best practice for icon sizes on the web. The width and height can be changed to whatever you so desire and this will update the symbol "width" and "height" properties, as well as the SVG viewBox.

// Optimization

To help with SVG path spaghetti, you have the ability to optimize your SVG output. This can be configured and is achieved by using the open source SVGO optimization library.