import {Meta} from "@storybook/addon-docs/blocks";

<Meta title="Introduction/3-Usage" />

# Usage

Unity illustrations has two main concepts:

- Import the illustration asset you want to use from `@payfit/unity-illustrations` as a direct import
- render any illustration asset with the `Illustration` component

```tsx
import { Illustration } from '@payfit/unity-illustrations'
import DashboardIllustration from '@payfit/unity-illustrations/assets/Dashboard'

function MyComponent() {
  return <Illustration src={DashboardIllustration} alt="Dashboard illustration" variant="picture" />
}
```

You can customize the illustration's size and other properties using the class names from `@payfit/unity-themes`.

```tsx
import { Illustration } from '@payfit/unity-illustrations'
import DashboardIllustration from '@payfit/unity-illustrations/assets/Dashboard'

function MyComponent() {
  // square illustration with dimention --uy:spacing-600 (48px)
  return <Illustration src={DashboardIllustration} alt="Dashboard illustration" variant="picture" className="uy:size-600" />
}
```

## API

### Individual imports

The illustrations library exports all the illustrations as named imports, referencing the underlying SVG or Image asset internally. This allows you to use the illustrations in your project without bundling the entire library, and to have better discoverability and type-safety over the assets that you can use.

```tsx
import { Illustration } from '@payfit/unity-illustrations'
import DashboardIllustration from '@payfit/unity-illustrations/assets/Dashboard'

function MyComponent() {
  return <Illustration src={DashboardIllustration} alt="Dashboard illustration" variant="picture" />
}
```


### Dynamic imports

You can also use dynamic imports to import illustrations on demand. This is useful if you want to import illustrations only when they are needed or under certain dynamic conditions. For this case, make sure to use the individual import syntax.

```tsx
import { LazyIllustration } from '@payfit/unity-illustrations'

function MyComponent() {
  return <LazyIllustration name="Dashboard" alt="Dashboard illustration" variant="picture" className="uy:size-600" />
}
```

> **Note:** Avoid using variables in dynamic imports, like `const Dashboard = await import('@payfit/unity-illustrations/${illustrationName}')`, as it will not be able to be tree-shaken.

## TypeScript Support

This package includes TypeScript definitions, and a list of all the available illustration names is exported as a type.

```tsx
import { type UnityIllustrationName, illustrationNames } from '@payfit/unity-illustrations'

const myIllustrations: UnityIllustrationName[] = ['Dashboard', 'FAQ', 'Library']

console.log(illustrationNames) // ['Dashboard', 'DashboardOutlined', ...+309 illustrations more]
```