Components

SvgDesc

A themed native SVG desc primitive. Render it inside Svg or an appropriate SVG parent.

Props

Native attributes and event handlers are forwarded to the underlying desc element unless handled by the component.

PropTypeDefaultDescription
children Snippet undefined Content snippet rendered by the component.
class string '' Tailwind classes merged with the theme and variants.
element SVGDescElement | null null Bindable reference to the underlying DOM element.
inTransition TransitionProps undefined Overrides the opening transition.
isVisible boolean true Bindable visibility state.
outTransition TransitionProps undefined Overrides the closing transition.
theme Theme global theme Optional local theme override.
transition TransitionProps [noopTransition, {}] A Svelte transition function and its options.
variants string[] [] Local variant names or theme references such as button.base.

Default usage

Import SvgDesc from sveltewind/components. This example shows its default styling in a usable context.

A violet rectangle with rounded corners.
+page.svelte
Loading...

Examples

Theme variants

Every variant available for SvgDesc in the built-in themes is shown below.

unstyled — Apply the unstyled variant.

A violet rectangle with rounded corners.
+page.svelte
Loading...

accent — Apply the accent variant.

A violet rectangle with rounded corners.
+page.svelte
Loading...

muted — Apply the muted variant.

A violet rectangle with rounded corners.
+page.svelte
Loading...

Class overrides

Apply text-rose-500 opacity-75 locally. Classes are forwarded to this configuration element; its parent provides the visible surface.

A violet rectangle with rounded corners.
+page.svelte
Loading...

Props and behavior

Change lang while retaining the default component styling.

A violet rectangle with rounded corners.
+page.svelte
Loading...

Content and values

Provide different text, child content, or definitions inside the required parent context.

A circle and a square illustrate the relationship between two shapes.
+page.svelte
Loading...