Create SVG icon sprite

This is a tool to:

• help create an SVG icon sprite
• build a customisable demo automatically
• build different scripts to make it easier to use from different environments

It is used for TransferWise icons, but doesn't contain anything TransferWise-specific and is therefore suitable for other personal and enterprise uses.

About

How to use SVG icon sprites and what are the benefits - CSSTricks

Usage

Installation

npm install --save-dev create-svg-icon-sprite

Available scripts

buildReactModules

Builds a React component module named ${icon-name}.js for every icon in the icons directory and places them in react/ directory. They can then be imported individually, allowing us to minimize our app sizes.

For example:

...
import TransferIcon from '@transferwise/icons/react/transfer';

const YourComponent = () => (
  ...
  <TransferIcon size="sm" />
  ...
);

The icon class by default is icon, but you can use the className option on the build script to modify it, as so:

buildReactModules({ className: 'tw-icon' });

It also has a size prop, which simply adds a modifier class with - and the class name to the icon (so if the class is tw-icon, for size="sm", it will add tw-icon-sm).

The component also passes any other className and style values to the icon, so you can style them further.

createSprite

Builds a sprite from all the icons in the icons directory and places it in dist/sprite.svg. It can then be hosted wherever you choose and used via a simple request.

buildDemo

Builds a demo HTML in demo directory. It can then easily be pushed wherever you choose, but GitHub pages using the gh-pages CLI tool is recommended.

The demo has styles for different icon sizes which you could mimic, but choosing your own sizes is recommended.

Example demo (adding styles is possible)

buildSpriteScript

Builds an UMD script in dist/svg-icon-sprite.js that exposes the SVG sprite code as a string, e.g. '<?xml version="1.0" encoding="utf-8"?><svg ...></svg>'.

The global property name is svgIconSprite (so window.svgIconSprite if used from a non-module context).

This script can be a part of your bundle if you wish to avoid an extra request or wish to get started as fast as possible (as it doesn't require you to set up hosting the sprite).

buildVersionScript

Builds an UMD script in dist/svg-icon-sprite-version.js that exposes the version of the package as a string, e.g. '1.2.2'.

The global property name is svgIconSpriteVersion.

This is useful when you decide to host your icon sprite (allows you to cache it separately!), but still maintain control over which version you use from your package.

Contributing

1. Develop
2. For a single-run check of version match and linting errors, run npm test.
3. Bump version number in package.json according to semver and add an item that a release will be based on to CHANGELOG.md.
4. Submit your pull request from a feature branch and get code reviewed.
5. If the pull request is approved and the CircleCI build passes, you will be able to merge with rebase.
6. Code will automatically be released to GitHub and published to npm according to the version specified in the changelog and package.json.

Other

For features and bugs, feel free to add issues or contribute.