[ @sdxc/u/color ]

stroke-width

Sets stroke-width on an SVG shape.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { strokeWidth } from "@sdxc/u/color";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.strokeWidth(2)`	`css({ strokeWidth: "2" })`
`u.strokeWidth("0.5%")`	`css({ strokeWidth: "0.5%" })`

Examples

Basic example

Use strokeWidth with a number to set the width of an SVG shape's stroke, in the SVG's own units:

<svg width={240} height={96} viewBox="0 0 240 96" aria-hidden="true">
	<line x1={8} y1={12} x2={232} y2={12} mix={[stroke("brand"), strokeWidth(1)]} />
	<line x1={8} y1={36} x2={232} y2={36} mix={[stroke("brand"), strokeWidth(2)]} />
	<line x1={8} y1={60} x2={232} y2={60} mix={[stroke("brand"), strokeWidth(4)]} />
	<line x1={8} y1={86} x2={232} y2={86} mix={[stroke("brand"), strokeWidth(8)]} />
</svg>

Units and scaling

A number scales with the drawing; pass a string with a unit, like 2px, for a width that stays the same at every size:

<div mix={[...]}>
	<svg
		mix={[stroke("brand"), fill("none"), strokeWidth(2)]}
		viewBox="0 0 24 24"
		width={24}
		height={24}
		aria-hidden="true"
	>
		<path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8z" />
	</svg>
	<svg
		mix={[stroke("brand"), fill("none"), strokeWidth(2)]}
		viewBox="0 0 24 24"
		width={72}
		height={72}
		aria-hidden="true"
	>
		<path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8z" />
	</svg>
	<svg
		mix={[stroke("danger"), fill("none"), strokeWidth("0.75px")]}
		viewBox="0 0 24 24"
		width={72}
		height={72}
		aria-hidden="true"
	>
		<path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8z" />
	</svg>
</div>

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.strokeWidth("2.75rem")

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.strokeWidth(2))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.strokeWidth(2))

Signature

u.strokeWidth(value: number | (string & {}))