Skip to content
SVGtoReact

TypeScript output

SVG to TSX Converter

Convert an SVG into a typed React component. The download is .tsx, the props use SVGProps, and the conversion stays in your browser.

Converter

Runs in your browser. Your SVG is not uploaded.

Waiting for an SVG

TSX output

TypeScript component with SVG props.

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 TSX converter adds

Beside the JSX attribute rewrite, the file imports SVGProps and annotates the component parameter. A numeric width from the SVG becomes a numeric default. A value such as 100% stays a string, which SVGProps already allows. Turn on the accessibility title when you want an optional title prop and a <title> element.

If the project is JavaScript, use the SVG to JSX converter instead. Both pages use the same engine.

Typed example

This sample was generated with TypeScript, width and height props, and the accessibility title enabled. Formatting is on. Optimize and currentColor are off.

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.tsx
import * as React from 'react';
import type { SVGProps } from 'react';
interface SVGRProps {
  title?: string;
  titleId?: string;
}
const IconPath = ({
  title,
  titleId,
  width = 24,
  height = 24,
  ...props
}: SVGProps<SVGSVGElement> & SVGRProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    width={width}
    height={height}
    aria-labelledby={titleId}
    {...props}
  >
    {title ? <title id={titleId}>{title}</title> : null}
    <path
      className="icon"
      fillRule="evenodd"
      clipRule="evenodd"
      strokeWidth={2}
      strokeLinecap="round"
      d="M4 12h16"
    />
  </svg>
);
export default IconPath;

Questions

What type do the props use?

The component parameter is typed as SVGProps<SVGSVGElement> from React. When the accessibility title option is on, that type is combined with an optional title and titleId. Width and height, when enabled, use the same SVG props type, so a number or a string is accepted.

How do I download a .tsx file?

Convert the SVG, then use Download. The file name is the component name plus .tsx, and the file is created on your device. Copy puts the same source on the clipboard. This site does not keep a copy.

How is this different from the JSX converter?

The transform is the same SVGR pipeline. TSX adds the SVGProps annotation and a .tsx download. JSX leaves the parameter untyped and downloads .jsx. Pick the one that matches the file you are about to add to the project.