SVG to React JSX & TSX Converter
Convert SVG to a real React JSX or TSX component online. Camel-case SVG attributes, transform inline styles, forward props, and export locally.
1 SVG & component
JSX-aware XML conversion2 React component
Props forwarded on root SVGYour file is processed on this device and never uploaded.
How it works
From input to output,
in a few clicks.
Turn static vector markup into an import-ready functional React component. The converter walks the XML tree, translates SVG attribute conventions, builds React style objects, adds a root props spread, and removes active script or event content before generating your file.
- Load and name the componentPaste or upload an SVG, then enter a PascalCase JavaScript identifier such as ArrowIcon.
- Select JSX or TSXEnable TypeScript to add SVGProps typing and a type-only React import, or leave it off for a plain JSX component.
- Convert and verifyReview attribute and style conversion plus any safety warnings, inspect the image preview, and copy or download the component.
Good to know
Frequently asked questions
Which SVG attributes change in JSX?
Hyphenated presentation attributes become camelCase, class becomes className, and xlink:href becomes xlinkHref. Data and ARIA attributes keep their hyphenated names, while React-compatible casing is used for common SVG attributes such as viewBox.
How are inline styles converted?
A style attribute string becomes a React style object expression with camel-cased CSS properties and quoted values. For example, stroke-width: 2 becomes strokeWidth inside style={{ ... }} rather than remaining an invalid JSX string.
Are scripts and event handlers included?
No. Script elements, on-event attributes, and JavaScript or VBScript URL values are omitted. A visible warning reports these removals so the generated component can be reviewed before use.
Can consumers override the SVG props?
Yes. The root SVG includes {...props}; TSX output types it as SVGProps<SVGSVGElement>. The spread comes after the original root attributes so callers can supply React props such as className or aria-label.