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 | ❌ | ✅ |