import Compatibility from "../_compatibility.mdx";
import RNSVG from "./_rn-svg.mdx";

# Fill

## Usage

<RNSVG />

```tsx
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

<Compatibility
  supported={["fill-{n}", "fill-[n]"]}
  none={["fill-inherit", "fill-current"]}
/>
