Illustrations

React Spectrum offers a collection of illustrations that can be imported from @react-spectrum/s2/illustrations.

import Cloud from "@react-spectrum/s2/illustrations/gradient/generic1/Cloud";

<Cloud />

Available illustrations

Custom illustrations

To use custom illustrations, you first need to convert your SVGs into compatible illustration components. This depends on your bundler.

Parcel

If you are using Parcel, the @react-spectrum/parcel-transformer-s2-icon plugin can be used to convert SVGs to illustration components. First install it into your project as a dev dependency:

yarn add @react-spectrum/parcel-transformer-s2-icon --dev

Then, add it to your .parcelrc:

{
  extends: "@parcel/config-default",
  transformers: {
    "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"]
  }
}

Now you can import illustration SVGs using the illustration: pipeline:

import Illustration from 'illustration:./path/to/Illustration.svg';

Note that you must use the name illustration for the pipeline.

Other bundlers

The @react-spectrum/s2-icon-builder CLI tool can be used to pre-process a folder of SVG illustrations into TSX files.

npx @react-spectrum/s2-icon-builder -i 'path/to/illustrations/*.svg' --type illustration -o 'path/to/destination'

This outputs a folder of TSX files with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components. import Illustration from './path/to/destination/Illustration';