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

Class	Native (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