Undraw

Example

Usage

Doesn't work automatically in dark mode

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.

Download a svg illustration from undraw leaving the theme color as it is (#6c63ff).
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).

		<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.

Property Type Description

svg required

string

The unDraw SVG content as a string.

alt required

string

Alt text for the illustration.

caption

string

Optional caption text displayed below the illustration. Default: —

captionClass

string

Additional CSS classes for the caption element. Default: —

autoInvert

boolean

Whether to automatically invert colors in dark mode. Default: false

colorMap

object

A mapping of original SVG colors to replacement colors. Default: {}

class

string

Additional CSS classes to apply. Default: —

ref $bindable

HTMLElement

The underlying DOM element. Default: —

Property

svg

alt

caption

captionClass

autoInvert

colorMap

class

ref