Utility Reference
SVG
Panda provides utilities for styling SVG elements.
Panda provides utilities for styling SVG elements.
Fill
Change the fill color of an SVG element.
<svg className={css({ fill: 'blue.500' })} />| Prop | CSS Property | Token Category |
|---|---|---|
fill | fill | colors |
Stroke
Change the stroke color of an SVG element.
<svg className={css({ stroke: 'blue.500' })} />| Prop | CSS Property | Token Category |
|---|---|---|
stroke | stroke | colors |
Stroke Width
Change the stroke width of an SVG element.
<svg className={css({ strokeWidth: '1px' })} />| Prop | CSS Property | Token Category |
|---|---|---|
strokeWidth | stroke-width | borderWidths |
Full reference
Generated from @pandacss/preset-base, so this table always matches the utilities Panda ships.
SVG · 6
| Property | Shorthand | Class | Values |
|---|---|---|---|
| fill | — | fill | colors |
| stroke | — | stk | colors |
| strokeDasharray | — | stk-dsh | — |
| strokeDashoffset | — | stk-do | — |
| strokeLinecap | — | stk-lc | — |
| strokeWidth | — | stk-w | borderWidths |