SVG

SVG wrapper

With the <SVG> component you can pass SVG paths in it. It behaves like the usual <svg> element.

You can use all known properties from the regular <svg> element.

Usage

Import

To import the component you just have to use this code below.

import { SVG } from '@marigold/system';

Props

PropertyTypeDefaultDescription
sizenumber | string | number[] | string[]24The size of the SVG element.
colorstringnoneColor for the SVG element. Accepts color tokens.
...-Yes you can use all regular attributes of svg!

Examples

Simple SVG

In this example you can see how to use the <SVG> element.

Colorize

To modify the color, adjust the color prop using a design token.