Illustration

Usage

import { Illustration, SvgSmile } from '@loomhq/lens'
<Illustration src={<SvgSmile />} />

Illustration

See the Illustration set.

<Arrange gap="medium">
  <Illustration src={<User />} />
  <Illustration src={<LightBulbOrbit />} />
  <Illustration src={<Coins />} />
</Arrange>

Size

The default size is 12×12 units (6rem × 6rem), To change it use the size prop, the value can be specified in units, pixels or any valid css unit.

<Arrange gap="medium">
  <Illustration src={<Calendar />} />
  <Illustration size={9} src={<Calendar />} />
  <Illustration size='3rem' src={<Calendar />} />
</Arrange>

With alternative text

If the illustration is not purely decorative, add an image text alternative for accessibility reasons.

<Illustration altText="search" src={<Search />} />

Props