Easily Convert SVG Files to JSX

Turns SVG markup into a React function component: SVGO optimizes the SVG in your browser, then SVGR converts it on the server. Attributes are camelCased (stroke-width to strokeWidth), numeric sizes become numbers, and {...props} is spread on the root <svg>.

Turning an icon exported from Figma or Illustrator into a React component.

SVG

SVGO optimization is turned on. You can turn it off or configure it in settings. SVG to JSX code is converted on the server.

Original

Result

JSX

When to use it

Turning an icon exported from Figma or Illustrator into a React component.
Checking how SVGR will rewrite an SVG before adding SVGR to a build pipeline.

How to use

Paste SVG markup or load an .svg file; input that is not valid SVG is rejected with an error.
Open Settings to switch SVGO optimization off or toggle plugins such as remove title or merge paths; the preview below the editor compares the original and optimized SVG.
Copy the component and rename SvgComponent; pass className, width or fill as props.

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

React component (JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

Details and limitations

SVGO runs in a Web Worker in your browser; the optimized SVG is then sent to this site's /api/svg-to-jsx endpoint, where SVGR generates the component. Do not paste confidential artwork.

With the default settings, comments, <title>, <desc> and editor metadata are removed and path data is shortened (M5.000 12.000 L19.000 12.000 becomes M5 12h14). Turn optimization off to convert the SVG as pasted.

style strings become style objects and class becomes className.

Output targets React DOM; use SVG to React Native for react-native-svg.

FAQ

Why does the root keep width and height?

remove dimensions is off in the SVGO settings and SVGR uses default options, so dimensions are kept as numbers (width={24}). Override them through props, since {...props} comes after them.

Will fill="currentColor" let me set the color from CSS?

Yes. currentColor is kept, so the icon follows the CSS color of its parent. Hard-coded colors inside paths are not replaced.

Why is the <title> missing from my component?

SVGO's remove title is on by default. Turn it off in Settings, or switch optimization off entirely, if you need the <title> for accessibility.

Is TypeScript output available?

No. The page outputs a JavaScript component without type annotations.

Specifications and references

SVGR documentation

SVG