How do I convert SVG into a React Native functional component?

Paste SVG and click Make functional component to generate a function-style RN SVG component.

When should I use forwardRef instead of a plain function?

Use forwardRef when parent code must attach a ref for layout or animation.

Open SVG React Native Component Generator.

FAQ

Quick answers

How do I convert SVG into a React Native functional component?: Paste SVG and click Make functional component to generate a function-style RN SVG component.
When should I use forwardRef instead of a plain function?: Use forwardRef when parent code must attach a ref for layout or animation.
Need a broader SVG React Native Component Generator flow?: Open SVG React Native Component Generator.
Is functional-component conversion free?: Yes. Free browser tool.

SVG to RN → RN SVG component → RN JSX → Paste SVG to RN →

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B