Wise icons


Check out the live demo

Each Icon is designed in three sizes: 16 (default), 24, and 32 pixels.
The icon set are mostly outline icons but there are also some filled icons. These are all variations of an outline icon with -fill added as a suffix. Icons with a filled version have a blue badge in the Live Demo.

Icon components are generated by script files (see src/build-scripts folder).

Usage

Install

``sh
pnpm add @transferwise/icons
`

Import and use it with

![Edit TransferWise Icons | React](https://codesandbox.io/s/transferwise-icons-react-e0rt2z)

`ts
import { Bank as BankIcon } from '@transferwise/icons';

const YourComponent = () => ;
`

will result in

`html


d="M22.003 9.408l-10-7.405-10 7.405 1.195 1.595 8.805-6.52 8.805 6.52 1.195-1.595z"
>



`

map of all icons (useful for dynamic icon pick up):

`ts
import * as icons from '@transferwise/icons';

const AchIcon = icons['Ach'];



`

Each component has className property as well, so you can avoid wrapping your component in extra parent elements.

`jsx

`

Necessary CSS

To display the icons properly, you need to import CSS styles in your app. This file only makes sure that s are rendered as block elements and handles a11y features.

`css
@import '~@transferwise/icons/lib/styles/main.min.css';
`

or just import it from JS depending on your build system:

`js
import '@transferwise/icons/lib/styles/main.min.css';
`

Styling

Each component has a general .tw-icon CSS class and a specific one that includes the icon's name in kebab-case, e.g .tw-icon-card-wise

$3

The CSS rule color cascades to the shapes, because each inline SVG shapes all have the fill property set to currentColor. More info about Cascading SVG Fill Color. You can set the color of the icons, by simply using the following CSS

`css
/ to set the color of all the icons /
.tw-icon {
color: #2ed06e;
}

/ to set the color of individual icons /
.tw-icon-activity {
color: #00b9ff;
}
.tw-icon-fast-flag {
color: #00b9ff;
}

/ if an icon inside another element should have a specific color /
.parent-element > .tw-icon-fast-flag {
color: #00b9ff;
}

/ change the color of the icon on :hover /
.parent-element:hover > .tw-icon-fast-flag {
color: red;
}
`

Accessibility

Each React icon component has an optional title property in case your icon has a semantic meaning, use this property, so it will be visible for Screen Readers.

`jsx

`

By default icon will be removed from accessibility tree as aria-hidden="true" and role="none" attributes will be added.

Contributing

Add / remove / change icon(s) in the wise-atoms project and then consume here.
wise-atoms is a submodule so use --recursive when cloning or fix it later like this

If you are confused about how to update submodules then check here

Follow the naming convention, use kebab-case for naming the icon.

If an icon is updated but keeps its old name AND it used to be called something else (see OLD_ICON_NAMES_MAP in create-icons-map.ts) then you must delete the entry for that icon from the map so that the icon will get updated

The build process for parsing, optimizing and generating individual icon components out of SVG files is done by script files, that you can find the in the src/build-scripts folder.
Rollup.js is used for generating the ES and UMD bundles of the library.

Follow these steps, if you'd like to contribute to the project:

1. Run pnpm run build to check your changes.
1. For a single-run check of version match and linting errors, run pnpm run test.
1. Bump version number in package.json according to semver and add an item to CHANGELOG.md`.
1. Submit your pull request from a feature branch and get code reviewed.
1. If the pull request is approved and the Github Action passes, you will be able to squash and merge.
1. (CircleCI build will fail. I don't know how to get it to stop running)
1. Code will automatically be released to GitHub and published to npm with the version specified in the changelog and package file.