Micro Tools
Advertisement

SVG to React Native

Paste SVG and convert it into components for react-native-svg. Tags become Svg, Path and Circle, attributes are camelCased, and the import line is generated for you.

SVG to React Native

Paste SVG markup below.

Advertisement

How the conversion works

Each SVG tag is mapped to its react-native-svg component: svg to Svg, path to Path, circle to Circle, gradients to LinearGradient and so on. Attributes are camelCased, class attributes are dropped since React Native has no CSS classes, and an import line with exactly the components you used is generated.

Using the output in your app

Install react-native-svg, paste the generated component into your project, and render it like any other component. Pass width, height and fill props through to restyle the icon per usage.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

SVG to React Native FAQs

Which SVG elements are supported?
Common shapes, groups, paths, text, gradients, clip paths, masks and use elements are mapped. Filters and animations have no react-native-svg equivalent and are skipped.
What happens to CSS classes?
Class attributes are removed because React Native does not use CSS. Move any class based styling into explicit fill, stroke and opacity attributes before converting.
Are gradients supported?
Yes. linearGradient and radialGradient map to LinearGradient and RadialGradient with their stop children, which react-native-svg renders natively.
Do I need to install anything?
Yes, your project needs the react-native-svg package. The import line at the top of the output matches its documented API.
Is my SVG uploaded?
No. Conversion runs entirely in your browser, so your artwork never leaves your device.
Advertisement