@transferwise/icons

TransferWise icons

This is the TransferWise SVG icon set, as seen in this demo.

The SVG icon sprite and demo are built using create-svg-icon-sprite.

Usage

A helpful general guide for SVG icon sprites - CSSTricks

React

The icons can 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 size prop should be one of the sizes defined in styles.css (sm, md, lg, xl, or xxl), which should also be imported for consistency.

The component also passes any other className and style values to the icon, so you can style them further, for example for a large blue icon:

<TransferIcon size="lg" className="text-info" />

CDN

The assets are available at:

https://daw291njkc3ao.cloudfront.net/icons/{version}/sprite.svg (SVG sprite itself) https://daw291njkc3ao.cloudfront.net/icons/{version}/svg-icon-sprite.js (sprite string script) https://daw291njkc3ao.cloudfront.net/icons/{version}/svg-icon-sprite-version.js (sprite version script) https://daw291njkc3ao.cloudfront.net/icons/{version}/icons.min.css (styles)

Where {version} is either the package version or latest.

Installation

npm install --save @transferwise/icons

Usage from a module-based environment

Javascript

import { iconSprite } from '@transferwise/icons';

... // append SVG icon sprite string to HTML
... // create components in your framework if you want to

If you wish to optimise as much as possible and only bundle the icons you need, you can use Webpack plugins to require the icons from the dist/icons directory and create your own sprite and serve it as you choose.

CSS

@import '~@transferwise/icons/dist/icons.min.css';

(or just import it from JS depending on your build system)

Usage from a non-module-based environment

JavaScript

1. Add node_modules/@transferwise/icons/dist/svg-icon-sprite.js to your bundle.
2. Use window.svgIconSprite from your code to access the sprite string
3. Create components in your framework if you want to

CSS

@import 'node_modules/@transferwise/icons/dist/icons.min.css';

Usage from server side

Just append the sprite code (manually or in case of Node, by requiring it as a module) to your template and use like explained here.

We recommend using the provided stylesheet for the classes below.

Styles

The package comes with styles (icons.min.css) for icon sizes you should use in your components for consistency.

Class	Size
tw-icon-sm	16px
tw-icon-md (default)	24px
tw-icon-lg	32px
tw-icon-xl	40px
tw-icon-xxl	48px

Adding/removing/changing icons

1. If adding, minify your 24x24 SVG icon(s) (https://jakearchibald.github.io/svgomg/ using Precision 1)
2. Add/remove/change icon(s) in the icons folder.
3. Change package.json version (if doing multiple of these, follow the first one that applies):
   Removing an icon: major release, f.e. 1.2.3 => 2.0.0
   Adding an icon: minor release, f.e. 1.2.3 => 1.3.0
   Changing an icon: patch release, f.e. 1.2.3 => 1.2.4
4. Add a CHANGELOG.md entry with the version and an explanation of changes
5. Submit your pull request from a feature branch and get code reviewed.
6. If the pull request is approved and the CircleCI build passes, you will be able to merge with rebase.
7. Code will automatically be released to GitHub and published to npm with the version specified in the changelog and package file.
8. The demo will also automatically be built.

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 with the version specified in the changelog and package file.

Other

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