# stroke-width

> Sets `stroke-width` on an SVG shape.

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

Sets `stroke-width` on an SVG shape. A bare number stays a unitless SVG
user-unit value, so the stroke scales with the SVG's own coordinate
system; a string passes through for a value that needs an explicit unit.

## 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:

```tsx
<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:

```tsx
<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.

```ts
u.strokeWidth("2.75rem")
```

## Applying on a state

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

```ts
u.hover(u.strokeWidth(2))
```

## Responsive design

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

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

## Signature

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