# Excalidraw

## Example

```svelte
<script>
	import { Excalidraw } from '@foxui/all';

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

<Excalidraw {svg} alt="Excalidraw Demo" caption="This is a demo of the Excalidraw component." />
```

## Documentation

## Usage

1. Draw a diagram in [excalidraw](https://excalidraw.com/) with the default colors and export it as a svg without a background.

2. Import that svg and use it with the excalidraw component, colors will be automatically changed to your theme colors.

```svelte
<Excalidraw {svg} alt="Excalidraw Demo" caption="This is a demo of the Excalidraw component." />
```

## API Reference

### Excalidraw
Renders an Excalidraw SVG drawing with optional caption.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| svg | `string` | `-` | The Excalidraw SVG content as a string. (required) |
| alt | `string` | `-` | Alt text for the drawing. (required) |
| caption | `string` | `-` | Optional caption text displayed below the drawing. |
| captionClass | `string` | `-` | Additional CSS classes for the caption element. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLElement` | `-` | The underlying DOM element. (bindable) |