# Undraw

## Example

```svelte
<script lang="ts">
	import { Undraw } from '@foxui/all';

	import svg from '$lib/assets/undraw_yoga.svg?raw';
</script>

<div class="mx-auto w-full max-w-md">
	<Undraw
		{svg}
		alt="Undraw"
		colorMap={{
			'#090814': 'fill-base-950 dark:fill-accent-950',
			'#d6d6e3': 'fill-base-300 dark:fill-base-700',
			'#cacaca': 'fill-base-400 dark:fill-base-600',
			'#cfcce0': 'fill-base-500 dark:fill-base-500',
			'#f2f2f2': 'fill-base-200 dark:fill-base-800'
		}}
	/>
</div>
```

## Documentation

<script>
	import { Alert } from '@foxui/all';
</script>

## Usage

<Alert variant="default" type="warning" title="Doesn't work automatically in dark mode">
	<span>
		Use the `colorMap` prop to change the colors of the illustration like in the example below to make it work in both light and dark mode.
	</span>
</Alert>

1. Download a svg illustration from [undraw](https://undraw.co/illustrations) leaving the theme color as it is (#6c63ff).
2. Import that svg with the `?raw` extension and use it with the undraw component. The theme color will automatically change to your theme color, all other colors will have to be manually changed using the `colorMap` prop (or if not using dark mode, leave as is).

```svelte
<Undraw
	{svg}
	alt="Undraw"
	colorMap={{
		'#090814': 'fill-base-950 dark:fill-accent-950',
		'#d6d6e3': 'fill-base-300 dark:fill-base-700',
		'#cacaca': 'fill-base-400 dark:fill-base-600',
		'#cfcce0': 'fill-base-500 dark:fill-base-500',
		'#f2f2f2': 'fill-base-200 dark:fill-base-800'
	}}
/>
```

## API Reference

### Undraw
Renders an unDraw SVG illustration with optional color remapping and dark mode inversion.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| svg | `string` | `-` | The unDraw SVG content as a string. (required) |
| alt | `string` | `-` | Alt text for the illustration. (required) |
| caption | `string` | `-` | Optional caption text displayed below the illustration. |
| captionClass | `string` | `-` | Additional CSS classes for the caption element. |
| autoInvert | `boolean` | `false` | Whether to automatically invert colors in dark mode. |
| colorMap | `Record<string, string>` | `{}` | A mapping of original SVG colors to replacement colors. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLElement` | `-` | The underlying DOM element. (bindable) |