React library for art elements (illustrations, tapestries, animation and alike) in UI.
Demo deployment: https://transferwise.github.io/web-art
Art assets powered by Wise Atoms.
npm install @wise/art
yarn add @wise/art
pnpm add @wise/art
This package relies on following peer dependencies:
react
react-dom
import '@wise/art/dist/Illustration.css';
Note: ignore naming, the bundle store styles for multiple components from the package.
Illustrations works via Illustration
React component. The component implements Responsive Images concept so you don't need bother about different image sizes for different devices.
import { Illustration, Assets, Sizes } from '@wise/art';
<Illustration
name={Assets.BRIEFCASE}
alt="..."
id="..."
className="..."
// 'eager` by default
loading={'lazy' | 'eager'}
// removes padding around image, `false` by default
disablePadding={ true | false }
// React Ref
ref={...}
/>
This package don't provide support for Angular.
Consider use react2angular
or alike wrappers:
import { react2angular } from 'react2angular';
import { Illustration } from '@wise/art';
angular
.module('tw.someModule', [ ... ])
.component('wiseIllustration', react2angular(Illustration))
in Angular HTML template file
<wise-illustration id="'test-id'" alt="'Image of briefcase'" name="'briefcase'">
</wise-illustration>
3D illustrations work via Illustration3D
React component. The component uses three.js framework to preview 3D models.
import { Illustration3D, Assets, Sizes } from '@wise/art';
<Illustration3D name={Assets.LOCK} size={Sizes.LARGE} />
Note: this API requires React 18.
Note: if your tests fail because of matchMedia
and ResizeObserver
being undefined you need add polyfills or mocks for Jest's jsdom env, use mocks from @transferwise/components/mocks
.
Flags generated from wise-atoms SVGs are accessible by either of these:
- Two-letter country code (ISO 3166-1 alpha-2) — e.g.: GB, US
- Three-letter currency code (ISO 4217) — e.g.: GBP, USD
import { Flag } from '@wise/art';
<Flag code="GB" />
<Flag code="GBP" intrinsicSize={150} />
The underlying assets may be loaded directly as images. Make sure to:
- Use lowercase letter codes, e.g.
"gbp"
instead of"GBP"
- Use detailed variant when
intrinsicSize >= 150px
- Use
"wise"
as a fallback when a flag can’t be found
E.g.:
<img src="https://wise.com/web-art/assets/flags/usd.svg" alt="" width="24" height="24">
<img src="https://wise.com/web-art/assets/flags/usd-detailed.svg" alt="" width="150" height="150">
<!-- Not every flag has a detailed variant at large sizes, though -->
<img src="https://wise.com/web-art/assets/flags/gbp.svg" alt="" width="150" height="150">
If you want to see all the flags, head over to wise.design.
- Bump version number in
package.json
according to semver and add an item toCHANGELOG.md
. - If you updated
wise-atoms
make sure to runpnpm build
to update components and S3 bucket. - Commit & Push & PR.
- Once PR merge code will automatically be published to NPM with the version specified in the
package.json
.
All the resources are pulled from wise-atoms which does not use version numbers.
Grab the commit hash from the latest version of wise-atoms and paste it in to the package.json here:
"wise-atoms": "git+ssh://git@github.com:transferwise/wise-atoms.git#{commit-hash}",