SVG to React Native SVG Converter
Paste raw SVG markup to instantly convert it into a react-native-svg component, with tag names and attributes renamed to their react-native-svg equivalents. Free online developer tool.
Paste SVG Markup
React Native Component
React Native component will appear here...
Free SVG to React Native SVG Converter
Paste raw SVG markup to instantly convert it into a react-native-svg component. Tag names like <path>, <circle>, and <g> are renamed to their capitalized react-native-svg equivalents (Path, Circle,G), with attributes camelCased the same way as the SVG-to-JSX converter.
How to Use It
Paste any SVG markup into the input box, or click "Load Example". The tool parses the markup, walks the element tree, and renames every tag to its react-native-svg component name —svg becomes Svg, text becomes SvgText (sinceText is already a core React Native component), and so on. The generated code includes a comment listing exactly which components to import.
Example
<svg viewBox="0 0 24 24"> becomes <Svg {...props} viewBox="0 0 24 24">, and a nested <path fill-rule="evenodd" .../> becomes<Path fillRule="evenodd" .../> — ready to render on iOS and Android.
Common Use Cases
- Porting a web icon set into a React Native mobile app.
- Converting a designer's exported SVG illustration for use in Expo or bare React Native projects.
- Avoiding manual tag-renaming errors when moving SVG assets between web and mobile codebases.
FAQs
Do I need any extra packages to use the output?
Yes — the generated component imports from react-native-svg, which is not part of core React Native. Install it in your target project with npm install react-native-svg (and runpod install for iOS on bare React Native) before using the generated component.
Which tags get renamed?
Common SVG elements — svg, path, circle, rect,g, line, polygon, polyline, ellipse,defs, linearGradient, radialGradient, stop,text, tspan, clipPath, and mask — are mapped to theirreact-native-svg component names. The tool also lists exactly which of these your snippet used, so you know what to import.
Is my SVG uploaded anywhere?
No — parsing and conversion happen entirely client-side in your browser. Nothing you paste is sent to a server.