Skip to content

Stroke

Set SVG stroke color

Syntax

visual="stroke:[color]"

Values

ValueCSS OutputDescription
nonestroke: noneNo stroke
currentstroke: currentColorCurrent color

Examples

html
<svg visual="stroke:primary stroke-w:2">...</svg>

Preview

SVG Stroke

visual="stroke:primary" - Stroke SVG elements with color

View Code
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
  <svg visual="stroke:danger fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

html
<div visual="stroke:[custom-value]">Custom</div>