SVG to React

Convert any SVG to a React component with TypeScript, camelCase attributes, and currentColor support.

import React from "react";

export default function MyIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M20 6 9 17l-5-5"/>
  </svg>
);
}

Last updated: March 2026

Frequently Asked Questions

How do I turn an SVG into a React component?

Paste your SVG into this tool, choose your options (TypeScript, currentColor, React.FC), and copy the output. The tool converts every kebab-case attribute to camelCase, converts inline styles to objects, and wraps everything in a reusable component that accepts SVG props.

What's the difference between .jsx and .tsx output?

Toggle the TypeScript option to switch. .tsx adds SVGProps<SVGSVGElement> typing so TypeScript autocompletes every valid SVG attribute. .jsx is plain JavaScript if your project doesn't use TypeScript.

Why use React.FC?

React.FC is a legacy convention — modern React teams often skip it. Toggle it on if your codebase uses it consistently, off otherwise. The React team currently recommends plain function declarations.

Related Tools

SVG to JSX Converter

Same converter tool

JSON Formatter

Format & validate JSON

Color Contrast Pairs

WCAG-accessible pairs

Need help? Email us