SVG to JSX component
Turn an SVG into a React component: camelCase attributes, a style object instead of a style string, className instead of class, and props spread onto the root element.
SVG to JSX component turns raw markup into a React component. class becomes className, and every other hyphenated or namespaced attribute becomes camelCase, matching how React names props like htmlFor. Aria and data attributes stay untouched. An inline style string parses into a JS object literal, and props spreads onto the root element. ComponentName sets the export name.
Questions
What attribute renames happen automatically?
class becomes className, for becomes htmlFor, tabindex becomes tabIndex, and every other hyphenated or namespaced attribute is camelCased at each hyphen and colon, which reproduces Reacts own names for props like xlinkHref and xmlSpace without a lookup table. aria- and data- attributes are left exactly as written, since React renders those kebab-case on purpose.
What happens to an inline style attribute?
It is parsed into declarations and rewritten as a JS object literal, so style="fill:red" becomes style={{ fill: 'red' }}; a custom property like --x keeps its own name quoted, since --x is not a legal object key on its own.
Where does the component name come from?
componentName if you set it, otherwise the file name turned into PascalCase; a name with no letters at all falls back to Icon.
Does it add prop spreading?
Yes, {...props} is added onto the root svg elements own attributes, so anything the calling code passes in, like className or onClick, reaches the rendered element.
What is the output file?
A .tsx file named after the component, holding a small React function component that returns the transformed markup.
Compare
| Tool | Runs on the CLI | Live as you type |
|---|---|---|
| SVG to JSX component | Yes | Yes |
| SVG to data URI | Yes | Yes |
| Build an SVG sprite | Yes | No |