SVG to JSX
Convert SVG markup into clean React JSX or TSX components
Drop an .svg file here
SVG files up to 5 MB.
You can also paste from the clipboard.
Paste SVG markup or upload a file to see the preview.
PascalCase, for example ArrowRightIcon.
More options
Removes comments and whitespace-only text between elements. This is a safe cleanup, not a full SVG optimizer.
Turn off for decorative icons: title, desc, role and ARIA attributes are removed and aria-hidden is added.
Replaces the root title and adds role="img".
What SVG to JSX does
SVG to JSX turns SVG markup into a React component or a plain JSX element. Attributes are mapped to their React names (class → className, stroke-width → strokeWidth, fill-rule → fillRule, clip-path → clipPath, xlink:href → xlinkHref), inline style strings become style objects, and the viewBox is always preserved so the icon keeps scaling correctly.
How to use it
- 1.Paste SVG markup, drop or browse for an .svg file, or load the example.
- 2.Check the sanitized preview and the list of removed unsafe items.
- 3.Set the component name and choose JSX or TSX output.
- 4.Toggle the wrapper, spread props, width/height removal, and currentColor as needed.
- 5.Copy the code or download it as a .jsx or .tsx file.
Options explained
Spread props forwards className, size, and event props from the component to the root <svg>; TSX adds an SVGProps<SVGSVGElement> type. Removing width and height lets CSS control the size through the viewBox. currentColor replaces solid fill and stroke colors so the icon inherits the text color, while none, transparent, gradients (url(...)), and CSS variables stay untouched. Clean up whitespace removes comments and whitespace-only text between elements; it is a safe cleanup, not a full SVG optimizer. Turn off accessibility attributes for decorative icons to remove title, desc, role, and ARIA and add aria-hidden, or enter a title to label meaningful icons with role="img".
Security and limits
Every input is sanitized before preview and conversion: <script>, <foreignObject>, event handlers such as onclick, javascript: URLs, external image or resource references, and unsupported elements are removed and reported. DOCTYPE declarations and XML entities are rejected. The preview renders only the sanitized markup as an image, so nothing in the SVG can run. SVG text is limited to 5 MB. Because unsupported elements are dropped, compare the preview with your original when converting complex illustrations.
