Skip to content
SvgJsx
Language: English

Convert SVG to React Native (react-native-svg)

React Native cannot render <svg> tags directly. This converter rewrites your SVG into react-native-svg components such as Svg, Path, G and Circle, with the right imports.

Quick presets:
Drop .svg files here orFiles are read locally with FileReader and are never uploaded.
Options
Export:
import Svg, { G, Path } from "react-native-svg";
import type { SvgProps } from "react-native-svg";

const HeartIcon = (props: SvgProps) => (
  <Svg width="24" height="24" viewBox="0 0 24 24" {...props}>
    <G id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <Path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </G>
  </Svg>
);

export default HeartIcon;

Notes

  • class attributes were removed because React Native does not support them.

Preview

Preview of the converted SVG
Original SVG
706B
Optimized SVG
538B(-24%)
Component
648B

How the React Native output differs

react-native-svg exposes a capitalised component for each SVG element: <path> becomes <Path>, <g> becomes <G> and <linearGradient> becomes <LinearGradient>. The converter maps every supported element, adds a single import line containing only the components you use, and types props as SvgProps.

Elements that have no native equivalent, such as <title>, <desc>, <style> or <metadata>, are dropped with a note so the component does not crash at runtime. class attributes are removed as well, since React Native has no CSS classes.

Setting up react-native-svg

To use the generated component:

  • Install the library: npx expo install react-native-svg (Expo) or npm install react-native-svg (bare React Native).
  • Save the converted code as a .tsx or .jsx file in your project.
  • Render it like any component and pass width, height or color props.
  • Enable currentColor and pass a color prop to tint the icon from the parent.

Tips for mobile icons

Keep icons simple: filters and masks are expensive to render on low-end Android devices. Round coordinates to one or two decimals to shrink the JavaScript bundle, and prefer fill over stroke for very small icons because thin strokes can blur on non-retina screens.

Frequently asked questions

Does this work with Expo?

Yes. react-native-svg is included in the Expo SDK; install it with npx expo install react-native-svg and the generated component works in Expo Go and development builds.

Why was my <style> element removed?

react-native-svg does not support CSS stylesheets. Move the rules into attributes such as fill and stroke before converting, or set them on the elements directly.

How do I change the icon color in React Native?

Enable currentColor, then pass color="#ff0000" to the component. react-native-svg resolves currentColor from the color prop of the Svg element.

Is react-native-svg-transformer still needed?

Not if you convert icons ahead of time. The transformer lets you import .svg files directly, while this tool produces plain components that need no Metro configuration.