SVG

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

The selected theme does not has any options for"variant" and "size".

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.

import { Center, Inline } from '@marigold/components';import { SVG } from '@marigold/system';export default () => (  <Center>    <Inline space={4}>      <SVG size={32} color="info-muted-accent">        <path d="M19.2 3H4.8C3.81 3 3.009 3.81 3.009 4.8L3 21L6.6 17.4H19.2C20.19 17.4 21 16.59 21 15.6V4.8C21 3.81 20.19 3 19.2 3ZM12.9 13.8H11.1V12H12.9V13.8ZM12.9 10.2001H11.1V6.60008H12.9V10.2001Z"></path>      </SVG>      <SVG size={32} color="success-muted-accent">        <path d="M19.2917 2.625H4.70833C3.5625 2.625 2.625 3.5625 2.625 4.70833V19.2917C2.625 20.4375 3.5625 21.375 4.70833 21.375H19.2917C20.4375 21.375 21.375 20.4375 21.375 19.2917V4.70833C21.375 3.5625 20.4375 2.625 19.2917 2.625ZM9.91667 17.2083L4.70833 12.2003L6.16667 10.7981L9.91667 14.4038L17.8333 6.79167L19.2917 8.19391L9.91667 17.2083Z"></path>      </SVG>      <SVG size={32} color="warning-muted-accent">        <path d="M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z"></path>      </SVG>      <SVG size={32} color="destructive-muted-accent">        <path d="M14.9531 5H17.9062V6.75H6.09375V5H9.04688L9.89062 4.125H14.1094L14.9531 5ZM8.625 19.875C7.69688 19.875 6.9375 19.0875 6.9375 18.125V7.62502H17.0625V18.125C17.0625 19.0875 16.3031 19.875 15.375 19.875H8.625Z"></path>      </SVG>    </Inline>  </Center>);

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