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 |
Stroke
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 |
Stroke Width
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 |