SVG to React Native

react-native-svg is the standard library for rendering SVG in React Native apps. The output of this converter depends on it. Install it via npm install react-native-svg or yarn add react-native-svg. For Expo projects, run expo install react-native-svg. Without this package, the generated component will not work.

This converter handles all common SVG elements: path, circle, rect, ellipse, line, polygon, polyline, g, defs, clipPath, linearGradient, radialGradient, stop, text, tspan, use, image, and more. Complex filters (feGaussianBlur, feColorMatrix, etc.) are partially supported — they will be converted but may have limited rendering in react-native-svg. Always test the output on your target devices.

When enabled, the converter replaces most fill and stroke color values with a single color prop. This lets you dynamically change the icon's color at runtime — perfect for theming. Values like none, currentColor, url(#...) gradients, and inherit are preserved. You can pass any valid color string via the color prop.

The TypeScript (.tsx) output includes a props interface with proper type annotations (width?: number, height?: number, color?: string), uses React.FC, and wraps the component in React.memo for performance. The JavaScript (.jsx) output is plain JSX without type definitions — simpler but less safe. Choose based on your project setup.

Copy the generated code into a new file (e.g., MyIcon.tsx), place it in your components folder, and import it like any other React Native component: import MyIcon from './MyIcon';. Then use it as <MyIcon width={32} height={32} color="#ff6b6b" />. All props are optional with sensible defaults from the original SVG.

react-native-svg implements a subset of the full SVG specification. Advanced features like feDisplacementMap, feTurbulence, complex mask combinations, and some pattern configurations may not render identically. For best results, flatten complex effects in a vector editor (Figma, Illustrator) before converting, or use simpler SVG primitives.