SVG
Wrapper for SVG elements
<SVG> is a wrapper around the standard SVG element, allowing you to easily include SVG graphics in your Marigold application. It supports all standard SVG attributes and can be styled using Marigold's design tokens.
Anatomy
The <SVG> component is a simple wrapper around the native SVG element.
Appearance
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
| Property | Type | Description |
|---|---|---|
variant | - | The available variants of this component. |
size | - | The available sizes of this component. |
Usage
You should use the <SVG> component when you want to include SVG graphics in your Marigold application.
Use it to display icons, illustrations, or any other SVG-based graphics. Inside the <SVG> component, you can include any valid SVG content, such as <path>, <circle>, <rect>, etc.
Colorize
To modify the color, adjust the color prop using a fitting design token from Marigold.
SVG attributes
You can pass any valid SVG attributes to the <SVG> component. This includes attributes like viewBox, width, height and more. The component will pass these attributes directly to the underlying SVG element, allowing you to customize the appearance and behavior of the SVG as needed.
Here is a list of more explanations for some common SVG attributes: SVG attribute reference
Props
SVG
Prop
Type
Accessibility props (54)
Prop
Type
DOM event handlers (164)
Prop
Type