SVG to React Native

Convert SVG to a React Native component

React Native has no built-in SVG support; the community library react-native-svg provides components such as Svg, Path, G, Circle and LinearGradient that mirror SVG elements. This converter rewrites plain SVG markup into those components and generates the matching import line.

Example output

import * as React from 'react';
import Svg, { G, Path } from 'react-native-svg';

const HeartIcon = (props) => (
  <Svg width="24" height="24" viewBox="0 0 24 24" {...props}>
    <Path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7…" stroke="currentColor" strokeWidth="2" />
  </Svg>
);

export default HeartIcon;

What the converter changes

• Element names are capitalised (path → Path) and only the components you use are imported.
• Attributes become camelCase props (stroke-width → strokeWidth).
• title, desc, style and script elements are removed, and class, style and xmlns attributes are dropped because react-native-svg does not use them.
• {...props} is spread on the root Svg so you can override width, height or colour.

Colours and sizing

currentColor works in react-native-svg when you pass a color prop to the Svg component, e.g. <HeartIcon color="#e11d48" width={32} height={32} />. Keep the viewBox so the icon scales correctly.

Limitations

CSS styles inside <style> blocks, filters and some advanced SVG features are not supported by react-native-svg. Flatten styles into attributes in your design tool, and optimise the file with the SVG optimizer first. For web React, use SVG to JSX.

Using the component

import HeartIcon from './HeartIcon';

<HeartIcon width={32} height={32} color="#e11d48" />

Because props are spread onto the root Svg, any prop supported by react-native-svg — such as opacity or accessibility labels — can be passed when you render the icon. For many icons, consider generating them once and exporting them from a single file so they can be imported by name.

Test the component on both iOS and Android: some gradients, clip paths and masks render slightly differently between platforms. If an icon appears blank, check that it has a viewBox and that its colours are not set through a removed CSS class.

Installing react-native-svg

The generated component needs the react-native-svg package in your app. In an Expo project, run npx expo install react-native-svg, which picks the version that matches your Expo SDK. In a bare React Native project, run npm install react-native-svg and then cd ios && pod install so the native iOS part is linked. Rebuild the app afterwards; a fast refresh alone does not load new native code.

One component per icon, or a transformer?

Converting icons with this tool gives you plain, reviewable component files and no build configuration. If your app has dozens of icons that designers update often, react-native-svg-transformer is an alternative: after a Metro configuration change you can write import Logo from './logo.svg' and the SVG is converted at build time. Both approaches render through react-native-svg, so the limitations above apply either way.

Privacy

The tool runs entirely in your browser. Nothing you type or paste is sent to our servers.