Skip to content
SVGtoReact

JSX output

SVG to JSX Converter

Turn an SVG into a React function component. Attributes are written the way JSX expects them, and the result is a .jsx file you can copy or download. Nothing leaves the browser.

Converter

Runs in your browser. Your SVG is not uploaded.

Waiting for an SVG

JSX output

JavaScript component with JSX.

Export

Format

Prettier, single quotes, 80 columns

Optimize

Optional SVGO. ViewBox stays.

currentColor

Off by default. Can change gradients.

Width and height props

Defaults come from the SVG or viewBox.

Accessibility title

Adds an optional title prop.

Limit 500 KB. Scripts and external URLs are removed.

Converted component will appear here.

What the JSX converter emits

The component is JavaScript, not TypeScript. A path written as class="icon" and stroke-width="2" comes back as className and strokeWidth. The element keeps its viewBox. Extra props land on the root svg so you can set aria-hidden or a class from the parent.

Need types instead? Use the SVG to TSX converter. The homepage converter can emit either format.

Attribute example

Generated with SVGR, formatting on, and the width and height props option turned off so the original sizes stay literal.

SVG
<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>
IconPath.jsx
import * as React from 'react';
const IconPath = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      className="icon"
      fillRule="evenodd"
      clipRule="evenodd"
      strokeWidth={2}
      strokeLinecap="round"
      d="M4 12h16"
    />
  </svg>
);
export default IconPath;

Questions

Does the JSX file import React?

Yes. Output uses the classic JSX runtime, so the file starts with import * as React from 'react'. That keeps the component usable in projects that still require React in scope. If your compiler uses the automatic runtime, the import may be unused and you can remove it after the file typechecks.

Can callers pass className and aria attributes?

Yes. Remaining props are spread onto the svg element. You can pass className, role, and aria attributes from the parent. Width and height are separate props when that option is on, with defaults taken from the file.

How do I use the component in Next.js?

Save the download as a .jsx file and import it. The component has no state or effects, so a Server Component can import it. Review the markup before you ship it, the same way you would review any generated code.