SVG

JSX style props for SVG elements.

Fill

Use the fill prop to set the fill color of an SVG element.

<chakra.svg fill="blue.500">
  <path d="..." />
</chakra.svg>

Prop	CSS Property	Token Category
`fill`	`fill`	`colors`

Use the stroke prop to set the stroke color of an SVG element.

<chakra.svg stroke="blue.500">
  <path d="..." />
</chakra.svg>

Prop	CSS Property	Token Category
`stroke`	`stroke`	`colors`

Use the strokeWidth prop to set the stroke width of an SVG element.

<chakra.svg strokeWidth="1px">
  <path d="..." />
</chakra.svg>

Prop	CSS Property	Token Category
`strokeWidth`	`stroke-width`	`borderWidths`