@transferwise/icons
v3.18.0
Published
Wise SVG icons
Downloads
1,007
Keywords
Readme
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.
React and AngularJS icon components generated by script files (see src/build-scripts
folder).
Usage
Install
pnpm add @transferwise/icons
Import and use it with
React
import { Bank as BankIcon } from '@transferwise/icons';
const YourComponent = () => <BankIcon size={24} data-testid="bank-icon" />;
will result in
<span class="tw-icon tw-icon-bank" aria-hidden="true" role="none">
<svg width="24" height="24" fill="currentColor">
<path
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"
></path>
<path d="M13 10v10h4v-7h2v7h2v2H3v-2h2v-7h2v7h4V10h2z"></path>
</svg>
</span>
map of all icons (useful for dynamic icon pick up):
import * as icons from '@transferwise/icons';
const AchIcon = icons['Ach'];
<AchIcon />
<icons.Bank />
Each component has className
property as well, so you can avoid wrapping your component in extra parent elements.
<BankIcon size={24} className="bank-profile-icon" />
AngularJS
import { TwIconsModule } from '@transferwise/icons/lib/angular';
// add it to the list of dependencies
angular.module('your-app-name', [TwIconsModule]);
and in template
<tw-bank-icon size="24"></tw-bank-icon>
<tw-icon name="bank" size="24"></tw-icon>
<tw-activity-icon size="24"></tw-activity-icon>
<tw-balance-icon size="16"></tw-balance-icon>
<tw-icon name="balance" size="16"></tw-icon>
Necessary CSS
To display the icons properly, you need to import CSS styles in your app. This file only makes sure that <svg>
s are rendered as block elements and handles a11y features.
@import '~@transferwise/icons/lib/styles/main.min.css';
or just import it from JS depending on your build system:
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
Coloring icons
The CSS rule color
cascades to the <svg>
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
/* 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.
<ActivityIcon size={24} title="Wise card transcation" />
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.
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:
- Run
pnpm run build
to check your changes. - For a single-run check of version match and linting errors, run
pnpm run test
. - Bump version number in
package.json
according to semver and add an item toCHANGELOG.md
. - Submit your pull request from a feature branch and get code reviewed.
- If the pull request is approved and the Github Action passes, you will be able to squash and merge.
- (CircleCI build will fail. I don't know how to get it to stop running)
- Code will automatically be released to GitHub and published to npm with the version specified in the changelog and package file.