Skip to main content
Version: v4

Fill

Usageโ€‹

React Native does not have SVG components but universal SVG support can be achieved with 3rd party libraries such as react-native-svg. While these docs use react-native-svg, the concept applies to all libraries.

You will need to cssInterop() on these components to properly style them for native.

Example usage
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Circle, Rect } from 'react-native-svg';
import { cssInterop } from 'nativewind'

cssInterop(Svg, {
className: {
target: "style",
nativeStyleToProp: { width: true, height: true }
},
});
cssInterop(Circle, {
className: {
target: "style",
nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
},
});
cssInterop(Rect, {
className: {
target: "style",
nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
},
});

export function SvgExample () {
return (
<View className="inset-0 items-center content-center">
<Svg className="h-1/2 w-1/2" viewBox="0 0 100 100" >
<Circle cx="50" cy="50" r="45" className="stroke-blue-500 stroke-2 fill-green-500" />
<Rect x="15" y="15" className="w-16 h-16 stroke-red-500 stroke-2 fill-yellow-500" />
</Svg>
</View>
);
}

Compatibilityโ€‹

ClassSupport
fill-{n}โœ… Full Support
fill-[n]โœ… Full Support
fill-inherit๐ŸŒ Web only
fill-current๐ŸŒ Web only
Legend

Classโ€‹

-{n} Supports values from theme

-[n] Supports arbitrary values

Iconโ€‹

โœ… Full support

โœ”๏ธ Partial support on native

๐Ÿงช Experimental support on native

๐Ÿ“ฑ Native only

๐ŸŒ Web only