SVG to JSX

How it works

The markup is parsed and rewritten as a function component. Hyphenated attributes become their camelCase DOM names — data-* and aria-* stay as they are — string style attributes become style objects, and the component name is derived from the file name unless you type one. The props spread sits last on the root element, so a caller's className, width or onClick wins over the file's defaults. TypeScript output types the component as React.SVGProps<SVGSVGElement>.

When to use it

Any time an icon needs to live in a React codebase as a component rather than an asset: you get lint-clean output instead of hand-fixing camelCase one attribute at a time. Converting a set gradually — paste, name, copy, next — without adding a build-time transform to the project. Run the file through the Optimizer first; everything it removes is weight the component would otherwise carry into your bundle forever.

Common problems

• Two icons swap fills when mounted together. Both define a gradient with the same id, and ids are document-global — the second definition wins for both. Namespace ids per instance with useId(); the React guide has the exact pattern.
• The component ignores className or sizing. The spread was toggled off, or got moved above the default attributes in later editing. It has to be present and last.
• The colour is stuck. The fill is still hard-coded from the export. Convert it to currentColor in the Color Replacer before converting, and the component follows its container's text colour.
• TypeScript rejects an attribute. Exporter-specific attributes survive the conversion but are not in React's SVG types. The Optimizer's editor-attribute pass strips them.