SVG to React Native

React Native has no built-in support for SVG: there is no <svg> element and no way to load an .svg file as an image. The standard solution is the react-native-svg library, which provides components such as Svg, Path and Circle that draw natively on iOS and Android. This converter turns an SVG file into a component that uses them, ready to drop into a React Native or Expo project.

From elements to components

Every SVG element has a matching react-native-svg component with a capitalised name: <svg> becomes Svg, <path> becomes Path, <g> becomes G, <linearGradient> becomes LinearGradient and so on, including clip paths, masks, patterns and common filter primitives. The import line is built from the components the file actually uses. Elements that the library does not support are dropped and named in a warning.

Attributes and styles

Attribute names are camelCased the way React expects: stroke-width becomes strokeWidth, stroke-linecap becomes strokeLinecap, and xlink:href becomes href. Inline style attributes are split into separate props, so style="fill:red" becomes fill="red". Stylesheets inside the SVG, a <style> element with classes, cannot be applied because react-native-svg does not read CSS, so they are removed with a warning; move those rules onto the elements in your design tool, or export with “presentation attributes” instead of CSS.

Cleaning editor exports

Files exported from Illustrator, Inkscape, Sketch and Figma carry extra baggage: an XML declaration, comments, a <title>, metadata blocks and Inkscape or Sodipodi namespaces. All of these are removed, along with xmlns, version and class attributes and the ids of ordinary shapes, which keeps the component short. Gradients, clip paths, masks and patterns keep their ids, because other elements refer to them.

Size and colour props

With “size and color props” on, the root Svg loses its fixed width and height and takes width={size} height={size} from a size prop that defaults to 24, plus any other props you pass. With currentColor on, every fill and stroke except none and gradient references becomes currentColor, and the component takes a color prop, so <BellIcon color="tomato" size={32} /> recolours and resizes the whole icon. TypeScript output types the props with SvgProps.

A worked example

The Sample is a bell icon with a gradient dot. The output begins import Svg, { Circle, Defs, LinearGradient, Path, Stop, type SvgProps } from 'react-native-svg'; and exports a BellIcon component. The paths keep strokeWidth="2" strokeLinecap="round", the dot becomes <Circle cx="18" cy="5" r="3" fill="url(#g)" />, still pointing at its gradient, and the <title>Bell</title> from the file is gone.

What is not supported

CSS stylesheets and class selectors, foreignObject content with HTML, embedded fonts and some advanced filter effects either have no support in react-native-svg or behave differently from browsers. Test the component on both platforms, and simplify the artwork in the design tool if something renders differently.

Installing the library

Add react-native-svg with npx expo install react-native-svg in Expo projects, or with your package manager and a pod install in bare React Native projects. The component then works anywhere you would use an image.

Related tools

• HTML to JSX converts SVG for React on the web.
• Hex to UIColor turns the icon colours into native colour code.
• SVG to PNG exports raster fallbacks for app stores and notifications.
• Image to SVG traces a bitmap logo into a vector first.