About this SVG to JSX converter
Pasting raw SVG into a React file almost works, but React warns about class instead of className, stroke-width instead of strokeWidth, xlink:href, and inline style strings, and it refuses event handler strings. This converter rewrites all of that: hyphenated and namespaced attributes become their camelCase JSX names, while data- and aria- attributes stay as they are; style strings become objects; braces in text are escaped; and XML declarations and comments are dropped. For safety it can strip script elements, on-event handlers, and javascript: links. The result is a complete component that spreads props onto the svg, so you can pass className, size, or colors, with optional TypeScript types, forwardRef, React.memo, a title for screen readers, and 1em sizing that follows the font size.
How to convert SVG to a React component
- Add the SVG. Paste the markup from your design tool, open an .svg file, or press an example.
- Choose the options. Name the component and pick TypeScript, forwardRef, memo, an accessible title, icon sizing, and how to export it.
- Press Convert to React. Copy the component or download it as a .jsx or .tsx file and import it like any other component.
Frequently asked questions
Why does React need different attribute names?
JSX maps attributes to DOM properties, which use camelCase. class is a reserved word in JavaScript, so React uses className, and stroke-width becomes strokeWidth.
What does spreading {...props} do?
It passes any props you give the component to the svg, so you can write <Logo className="h-6" fill="red" /> and override size, color, or event handlers.
What does 1em sizing mean?
Width and height become 1em, so the icon scales with the surrounding font size, just like text. Set font-size on a parent to resize it.
Why add a title prop?
Screen readers announce the title of an svg with role="img". A title prop lets you describe each use, such as “Download”, while decorative icons can leave it empty.
Is it safe to paste untrusted SVG?
With the sanitize option on, script elements, on-event attributes, and javascript: links are removed, which covers the common ways SVG files carry code. Review the output before shipping it.