Back to Coding Tools

SVG to React Native

Convert SVG markup to React Native compatible components

SVG Input
React Native Output
Paste SVG on the left...

What is SVG to React Native?

This tool converts standard SVG markup into React Native compatible components using the react-native-svg library. It automatically transforms HTML SVG tags (like path, circle, rect) into their React Native equivalents (Path, Circle, Rect) and converts kebab-case attributes to camelCase.

What Gets Converted?

Tags

svg→Svg, path→Path, circle→Circle, rect→Rect, g→G, and more.

Attributes

stroke-width→strokeWidth, fill-opacity→fillOpacity, clip-path→clipPath, etc.

Imports

Auto-generates the correct import statement from react-native-svg.