Stroke Width
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-1" />;
Compatibility
Class | Native (StyleSheet) | Web (CSS) |
---|---|---|
stroke-{n} | ✅ | ✅ |
stroke-[n] | ✅ | ✅ |