Components
Svg
A primitive SVG container for icons, illustrations, and composed components.
Props
Native attributes and event handlers are forwarded to the svg element.
Native SVG attributes are forwarded to the svg element. Give meaningful graphics an accessible name; mark decorative graphics aria-hidden.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content rendered inside the native element. |
class | string | '' | Classes merged with theme styles and variants. |
element | SVGSVGElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Entrance override; falls back to transition. |
isVisible | boolean | true | Bindable visibility state. |
outTransition | TransitionProps | undefined | Exit override; falls back to transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | Transition function and optional parameters. |
variants | string[] | [] | Local variants or references to other theme styles. |
Default usage
Import Svg from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Svg in the built-in themes is shown below.
accent — Apply the accent variant.
Loading...muted — Apply the muted variant.
Loading...vivid — Apply the vivid variant.
Loading...Class overrides
Apply text-rose-500 opacity-75 locally.
Loading...Props and behavior
Change width, height while retaining the default component styling.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...Loading...