Skip to main content
Version: v2

Fill

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({ fill, ...props }) {
return (
<Svg height="100" width="100" {...props}>
<StyledRect x="0" y="0" width="100" height="100" fill={fill} />
</Svg>
);
}

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

Compatibility

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

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

✅ Full support

✔️ Partial support

❌ Not supported