# SpotIllustration

> Themed SVG illustrations that adapt to the design system color palette

Status: stable. Added in Components 1.2.0.

Themed SVG illustrations that adapt to the design system color palette.

## Import

```tsx
import { NoteMusic, HighFive } from '@oztix/roadie-components/spot-illustrations'
```

## Examples

### Default

All spot illustrations default to 48px.

```tsx
<NoteMusic />
```

### Variants

#### Custom size

Use `className` with Tailwind size utilities to change the illustration size. For smaller sizes in UI, use iconography instead.

```tsx
<NoteMusic className='size-8' />
<NoteMusic />
<NoteMusic className='size-16' />
<NoteMusic className='size-24' />
```

#### With outline

Use the `outline` prop to show a white outline layer. Useful on dark backgrounds.

```tsx
<div className='flex flex-row gap-4 rounded-xl bg-neutral-12 p-4'>
  <NoteMusic />
  <NoteMusic outline />
</div>
```

## Available illustrations

- `ArrowUpRight`
- `CowboyHat`
- `Cursor`
- `FlowerSpiral`
- `Football`
- `Hand`
- `Heart`
- `HighFive`
- `MapPin`
- `NoteMusic`
- `Ticket`
- `WineGlass`

More illustrations can be added using the creation workflow below.

## Creating new illustrations

The build system automatically generates components from SVG files during development:

```bash
# Start dev mode (includes watch mode for SVG changes)
pnpm dev
```

**Quick workflow:**

1. Export your illustration from Figma as SVG
2. Save to the `SpotIllustration/svgs/` directory as `your-name.svg`
3. The component is automatically generated and ready to use

**Design requirements:**

- 48x48 frame size
- Use semantic illustration colors: `neutralSlate.0` (outline), `purple.5` (face), `orange.5` (detail), `blue.9` (shadow), `blue.5` (highlight), `neutralSlate.12` (stroke)

For detailed information about the build system, color matching, and troubleshooting, see the [SpotIllustration README](https://github.com/TicketSolutionsPtyLtd/roadie/tree/main/packages/components/src/components/SpotIllustration).

## Guidelines

- Spot illustrations are decorative by default and include `aria-hidden="true"`. If an illustration conveys meaningful information, add `role='img'` and `aria-label`.
- Illustration colors are fixed and do not change in dark mode.

## API reference

### SpotIllustration

```tsx
import { SpotIllustration } from '@oztix/roadie-components/spot-illustrations'
```

- `illustration`: `IllustrationData`. Required.
- `outline`: `boolean`. Defaults to `false`.

Docs updated 19 Oct 2026.