SVG to React Native

What the file contains

SVGR prints the component with native mode on. Elements such as path and rect become Path and Rect, imported from react-native-svg. A TypeScript file also imports the SvgProps type from that package. The classic JSX runtime adds import * as React from 'react'. Width and height are component props, and the same values are passed to the root Svg.

Need a web component instead? Use the converter, the JSX page, or the TSX page. Those pages emit an svg element. Vue and Svelte files are on SVG to Vue and SVG to Svelte. The optimizer, PNG export, and data URI tools are separate.

Example

This pair is the attribute demo run through the same React Native converter as the tool above. The language is TypeScript and the component name is IconPath. Formatting is on.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path class="icon" fill-rule="evenodd" clip-rule="evenodd" stroke-width="2" stroke-linecap="round" d="M4 12h16"/>
</svg>

import * as React from 'react';
import Svg, { Path } from 'react-native-svg';
import type { SvgProps } from 'react-native-svg';
const IconPath = ({ width = 24, height = 24, ...props }: SvgProps) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    width={width}
    height={height}
    {...props}
  >
    <Path
      className="icon"
      fillRule="evenodd"
      clipRule="evenodd"
      strokeWidth={2}
      strokeLinecap="round"
      d="M4 12h16"
    />
  </Svg>
);
export default IconPath;

Limits

• 500 KB per SVG. Larger files are rejected and are not converted.
• 10,000 elements. A larger tree is rejected.
• The SVG is sanitized before SVGR runs. A failed sanitize produces no file.
• Scripts, event handlers, and embedded HTML are removed. Warnings list those removals.
• Names that match a react-native-svg import, such as Svg or Path, are rejected.
• The copy and download actions use the React Native component. The original input is not offered as a file.
• The app that imports the file needs the react-native-svg package. This site does not install it.

Questions