SVG paint
Set currentColor or none for SVG fill and stroke.
Set SVG paint with exact utility classes.
Quick reference
| Example class | Expected declarations |
|---|---|
fill-none | fill: none; |
stroke-current | stroke: currentColor; |
fill-current | fill: currentColor; |
stroke-none | stroke: none; |
Example setup
These classes need no token configuration. The preview uses authored presentation CSS shown with the example.
Examples in use
SVG paint
svg-paint uses exact supported Wind utility classes.
SVG paint
HTML
<div class="wind-demo-new"><svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="Outlined circle"><circle class="fill-none stroke-current" cx="32" cy="32" r="24" stroke-width="4"/></svg><svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="Filled circle"><circle class="fill-current stroke-none" cx="32" cy="32" r="24"/></svg></div>CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-spacing-unit: .25rem;
}
}
.wind-demo-new {
color: #203046;
font: 14px / 1.5 system-ui, sans-serif;
}
.fill-current {
fill: currentColor;
}
.fill-none {
fill: none;
}
.stroke-current {
stroke: currentColor;
}
.stroke-none {
stroke: none;
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem"
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-new": true
},
"safelist": {
"docs-preview": [
"fill-none",
"stroke-current",
"fill-current",
"stroke-none"
]
}
}
}Authored demonstration CSS
.wind-demo-new { color: #203046; font: 14px/1.5 system-ui, sans-serif; }Custom and named values
Only the exact current and none forms are supported; author other SVG paint values in CSS.
Related guides: Utility grammar · Variants
Catalog details
fill-current
| Field | Value |
|---|---|
| Catalog identifier | v1.fill-current |
| Class pattern | fill-current |
| Grammar | {"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | 1 |
| Token categories | No token category |
| Negative-value policy | forbidden |
| Conflict group and rank | svg (48) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | fill |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
exact | null | "currentColor" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
fill | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
fill-current | fill: currentColor |
fill-none
| Field | Value |
|---|---|
| Catalog identifier | v1.fill-none |
| Class pattern | fill-none |
| Grammar | {"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | 1 |
| Token categories | No token category |
| Negative-value policy | forbidden |
| Conflict group and rank | svg (48) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | fill |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
exact | null | "none" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
fill | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
fill-none | fill: none |
stroke-current
| Field | Value |
|---|---|
| Catalog identifier | v1.stroke-current |
| Class pattern | stroke-current |
| Grammar | {"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | 1 |
| Token categories | No token category |
| Negative-value policy | forbidden |
| Conflict group and rank | svg (48) |
| Order rank | 1 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | stroke |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
exact | null | "currentColor" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
stroke | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
stroke-current | stroke: currentColor |
stroke-none
| Field | Value |
|---|---|
| Catalog identifier | v1.stroke-none |
| Class pattern | stroke-none |
| Grammar | {"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | 1 |
| Token categories | No token category |
| Negative-value policy | forbidden |
| Conflict group and rank | svg (48) |
| Order rank | 1 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | stroke |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
exact | null | "none" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
stroke | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
stroke-none | stroke: none |
Revision History
CreatedUpdated