Svg Icons Tools

Svg Icons Tools provides some utilities for manage and optimize SVG icons:

• optimize all files with SVGO
• combine svg files into a single file, where each icon is wrapped within a <symbol> element (inspired from svgstore)
• convert svg files to JSX
• copy optimized svg files to target directory
• removes pallets from the icon markups (see config file for more details).
• create a scss file with svg icons converted to sass variables
• jsx and optimized icons only: ability to manage both icons with fill and stroke adding optional classes to apply different css properties

These tools are pretty useless if you download your icons from one of the libraries you can find on the web, but if you design them yourself, svg-icons-tools can save you a lot of time in cleaning up and optimizing icons drawn with Illustrator, Figma, Sketch etc.

Also, most (or all) libraries only allow you to download icons with a fixed thickness, but you can often download "working" versions where thickness is defined by the stroke attribute. In these cases there is often a pallet that you can easily remove.

Read more in my Building an Icon System in React article.

Installation

npm i -D @massimo-cassandro/svg-icons-tools

Setup

First, create a config file for you project, you can run:

npx iconsTools init

This creates a svg-icons-tools directory which contains the svg-icons-tools.config.mjs configuration file.

Rename the folder as you like and move it where you need. Then open and customize the svg-icons-tools.config.mjs file.

Run

To launch the script, open your terminal and use the command:

npx iconsTools --config ./path/to/svg-icons-tools.config.mjs

where --config must contain the path, relative to the current dir, to the config file.

If the --config parameter is not set, the script will look for the configuration file in the current directory; if the file is not found, an error will be thrown.

Configuration details

See src/default-config.mjs for more info.

Demo

See demo/readme.

TODO

• documentation to jsdoc
• prettify the jsx output (update docs)
• SVG attributes to jsx (upd doc)
• option to clean-up dest folder for jsx and optimized (?)
• auto changelog

Changelog / Breaking Changes

1.1

• added default jsx icon builder function

Breaking Changes

• in config file, config.jsx.icon_builder becomes config.jsx.custom_icon_builder, if not defined the default icon builder is used for jsx files.

1.0

• First production release