Skip to content
Numio

Transform SVG for React Native Apps — Numio

Turns SVG markup into a React Native component that imports Svg, Path, G and other elements from react-native-svg. SVGO optimization runs first, and attributes become JSX props with numeric values as numbers (strokeWidth={2}).

Converting an icon exported from Figma or Sketch into a component for an Expo or React Native app that uses react-native-svg.

SVG

React Native

When to use it

  • Converting an icon exported from Figma or Sketch into a component for an Expo or React Native app that uses react-native-svg.
  • Shrinking a bloated SVG (titles, editor metadata, unused defs) before shipping it as a native component.

How to use

  1. Paste SVG markup into the SVG editor or drop a .svg file; the input must be valid SVG or you get "This is not a valid svg code."
  2. Open SVGO Settings to switch optimization off or toggle individual plugins such as remove title, remove view box or merge paths; the preview below the editor compares the original and the optimized SVG.
  3. Copy the React Native panel output into a .js or .tsx file and install react-native-svg in your app.

SVG markup

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Check</title>
  <g fill="none" stroke="#16a34a" stroke-width="2">
    <circle cx="12" cy="12" r="10"/>
    <path d="M7 12.5l3 3 7-7"/>
  </g>
</svg>

React Native component (react-native-svg)

import * as React from "react"
import Svg, { G, Circle, Path } from "react-native-svg"
const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <G fill="none" stroke="#16a34a" strokeWidth={2}>
      <Circle cx={12} cy={12} r={10} />
      <Path d="m7 12.5 3 3 7-7" />
    </G>
  </Svg>
)
export default SvgComponent

Details and limitations

SVGO optimization runs in a Web Worker in your browser, but the JSX generation is done on the server: the optimized SVG is posted to /api/svg-to-jsx, which runs SVGR with native: true.

Elements react-native-svg does not support are removed, and SVGR adds a comment such as /* SVGR has dropped some elements not supported by react-native-svg: filter */.

SVGO inlines <style> rules and then turns style declarations into attributes, so style="stroke:blue" becomes stroke="#00f" (stroke prop). <title> is removed by default.

width, height and viewBox are kept, and {...props} is spread on the root Svg so you can override size or color.

FAQ

Does the output need react-native-svg?

Yes. The component imports Svg and element components such as Path, Circle and G from react-native-svg, which must be installed in your project; it does not work with plain React Native Views.

Can I keep the viewBox so the icon scales?

Yes. remove view box is off by default, so viewBox stays on the Svg element. Pass width and height props when you use the component to scale it.

What happens to filters and gradients?

Elements without a react-native-svg equivalent, such as filter, are dropped with a comment at the top of the file. Unused gradients are removed by SVGO's remove useless defs.

Is my SVG uploaded?

The optimized SVG is sent to the page's /api/svg-to-jsx endpoint to generate the component; the optimization step and preview stay in your browser.

Specifications and references