Skip to main content

Stroke

Usage

Universally supported SVG's are possible through libraries such as react-native-svg. While these docs use react-native-svg, the concept applies to all libraries.

Using the classProp option of styled(), react-native-svg components can be universally styled.

import { styled } from "nativewind";
import { Svg, Rect } from "react-native-svg";

const StyledRect = styled(Rect, { classProps: ["fill", "stroke"] });

function MyStyledSvg({ stroke, ...props }) {
return (
<Svg height="100" width="100" {...props}>
<StyledRect x="0" y="0" width="100" height="100" stroke={stroke} />
</Svg>
);
}

<MyStyledSvg stroke="stroke-blue-500" />;

Compatibility

ClassNative (StyleSheet)Web (CSS)
stroke-{n}
stroke-[n]
stroke-inherit
stroke-current
Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

✅ Full support

✔️ Partial support

❌ Not supported