Which SVG attributes get converted?

class, inline style strings, and kebab-case SVG attributes (stroke-width, fill-rule, clip-path, font-size, xlink:href, and more) are mapped to their camelCase JSX equivalents.

What does "Wrap in Component" add?

It spreads {...props} onto the root tag and wraps the markup in an exported function component (or a React.forwardRef component when forwardRef is on) named after Component Name.

What does the currentColor option do?

It replaces any hardcoded fill or stroke value (except none, transparent, and currentColor itself) with currentColor, so the icon inherits the surrounding text color.

Toggling TypeScript (TSX) switches between a typed SVGProps component and a plain JavaScript one, and the Download button's file extension follows the same toggle.

Is the live preview safe for untrusted SVG?

The preview renders your pasted markup directly in your own browser tab. Don't paste SVG from sources you don't trust.

SVG to JSX / React

React / SVG

Convert raw SVG code into production-ready React JSX or TypeScript TSX components. Auto-converts attributes, wraps in typed components, and provides live vector preview.

Wrap in Component

Component Name

TypeScript (TSX)

forwardRef

currentColor

Raw SVG Input

0 lines · 0 chars SVG

Live SVG Preview

(Paste SVG to preview)

React JSX / TSX Component

0 chars JSX

About This Tool

Converts a raw SVG icon or graphic into a React component: kebab-case SVG attributes get their camelCase JSX names, the root <svg> can take a {...props} spread, and the whole thing is wrapped in an exported function (or forwardRef) component. A live preview renders the pasted SVG inline so you can check it before converting.

For converting general HTML markup rather than a standalone SVG, use HTML to JSX / React instead; this tool's preview, currentColor recoloring, and forwardRef option are SVG-specific and don't apply there.

Key Features

forwardRef toggle: swaps the plain function component for a React.forwardRef<SVGSVGElement> wrapper.
Component Name field: names the exported function and the file produced by Download.
Live SVG preview: renders the pasted markup inline as you type, separate from the JSX output panel.
currentColor toggle: recolors hardcoded fill/stroke values so the icon inherits surrounding text color.
Independent Wrap/TypeScript toggles: get a bare typed fragment or a full untyped component, or anything in between.

Example

Paste this SVG with Wrap in Component and TypeScript (TSX) checked, Component Name Icon:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="icon" stroke-width="2"><path d="M4 4h8v8H4z"></path></svg>

produces:

import type { SVGProps } from 'react';

export function Icon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" className="icon" strokeWidth="2"><path d="M4 4h8v8H4z"></path></svg>
  );
}

export default Icon;

FAQ

Which SVG attributes get converted?: class, inline style strings, and kebab-case SVG attributes (stroke-width, fill-rule, clip-path, font-size, xlink:href, and more) are mapped to their camelCase JSX equivalents.
What does "Wrap in Component" add?: It spreads {...props} onto the root <svg> tag and wraps the markup in an exported function component (or a React.forwardRef component when forwardRef is on) named after Component Name.
What does the currentColor option do?: It replaces any hardcoded fill or stroke value (except none, transparent, and currentColor itself) with currentColor, so the icon inherits the surrounding text color.
JSX or TSX output?: Toggling TypeScript (TSX) switches between a typed SVGProps<SVGSVGElement> component and a plain JavaScript one, and the Download button's file extension follows the same toggle.
Is the live preview safe for untrusted SVG?: The preview renders your pasted markup directly in your own browser tab. Don't paste SVG from sources you don't trust.