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

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