All tools

SVG to React Component

Code

Convert SVG to a React component (JSX or TSX) with camelCased attributes, a props spread, editor cleanup, 1em sizing and currentColor.

Loading tool…
Was this tool helpful?
svgreactjsxtsxiconconvertsvgr

About SVG to React Component

Turn an exported .svg file into a React component you can import like any other: attributes such as stroke-width and xlink:href are camelCased, inline styles become style objects, and {...props} lands on the root <svg> so callers can pass className, aria-label or onClick. Files saved from Inkscape, Illustrator, Sketch or Figma usually carry an XML prolog, comments, metadata blocks and editor-only attributes. These are stripped by default, so the component holds only what renders. For icons, switch the size to 1em so it follows the surrounding font size (a viewBox is added from the old width and height if the file lacks one), and replace hard-coded fills and strokes with currentColor so the icon picks up the text color. It works like the SVGR playground but needs no build step, and the same converter is available from the REST API, both SDKs and the MCP server.

How to use SVG to React Component

  • 1.Paste SVG markup into the left pane, drop or open an .svg file (the component name is taken from the file name), or pick an example.
  • 2.Choose the options you need: TypeScript, 1em sizing for icons, colors to currentColor, and whether to keep editor metadata or spread {...props}.
  • 3.Copy the component or download it as a .jsx or .tsx file, then check the warnings: they flag things like ids that would clash if the icon renders twice on a page.

Frequently asked questions

How is this different from the HTML to JSX converter?
HTML to JSX converts any markup and leaves the result as bare JSX. This tool is made for SVG files: it removes editor metadata, spreads props onto the root <svg>, wraps the output in a typed component and can rework sizing and colors for icon use.
Does it optimize the SVG like SVGO?
No. Path data, precision and group structure are kept exactly as they are, and only editor data, comments and the XML prolog are removed. If file size matters, run the SVG through SVGO or the SVG Viewer's optimizer first, then convert it.
Why did my multi-color logo turn one color?
The currentColor option replaces every fill and stroke color (except none and url(#gradient) references) so the icon follows the CSS color property. That suits single-color icons. For logos and illustrations, leave the option off; the tool warns you when it replaced more than one distinct color.
Is my SVG uploaded anywhere?
Not in the browser: the conversion and the preview run locally, and the preview loads the SVG as an image, so any script inside it never runs. The REST API runs the same code on Utilix's server and records only that the tool was called, not what you sent.

Use via API, SDK, or MCP

cURL# Free: 1,000 req/day · Pro: 10,000 req/day
curl -X POST https://api.utilix.tech/v1/tools/svg-to-react \
  -H "Authorization: Bearer utx_live_..." \
  -H "Content-Type: application/json" \
  -d '{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#111\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>","componentName":"ArrowIcon","typescript":true,"dimensions":"em","currentColor":true}'

Get an API key from your dashboard · Full API docs →

Related tools

HTML to JSX ConverterConvert HTML to React JSX: className, htmlFor, style objects, self-closing tags, JSX comments, and optional component wrapping.CodeFavicon GeneratorGenerate SVG favicons from text with custom colors and shapesImageSVG Generator (AI)Generate SVG illustrations, icons, and graphics from a text description using ClaudeImage