Skip to content

SVG to JSX Converter

Convert an SVG into a React component with camelCased attributes, className, style objects, optional TypeScript props, prop spread and currentColor.

SVG to JSX Converter

React component

Paste SVG markup to generate a React component.

Conversions applied

  • stroke-width → strokeWidth (camelCase)
  • class → className, for → htmlFor
  • xlink:href → xlinkHref
  • inline style string → style object
  • data-* / aria-* left untouched
  • empty elements self-closed

Updated . Provided as is. Check the output before you rely on it in production.

How to use SVG to JSX Converter

  1. 1

    Paste your SVG markup

    Drop a complete <svg>...</svg> snippet into the input, or press Load Sample to convert an example icon. Malformed markup is reported with an inline error.

  2. 2

    Name the component and pick options

    Set the component name and toggle TypeScript, prop forwarding, and currentColor to match how you intend to use the icon in your codebase.

  3. 3

    Review the generated component

    The output panel updates live, showing camelCased attributes, a style object where needed, and self-closed empty nodes ready to drop into a React project.

  4. 4

    Copy it into your project

    Use Copy to move the component into a .tsx or .jsx file, then import and render it like any other React icon.

Questions and answers

What does the SVG to JSX converter do?
JSX is the HTML-like syntax React components return, and raw SVG fails in it until attributes like stroke-width and class become strokeWidth and className. This converter parses your SVG with DOMParser and rewrites it as a named React component, with optional TypeScript props, prop forwarding and currentColor.
Does it output TypeScript?
Yes. Enable the TypeScript option to type the props as React.SVGProps<SVGSVGElement> and import React. Turn it off for a plain JavaScript component instead.
What does the currentColor option do?
When enabled, fixed fill and stroke colors like #0f172a are replaced with currentColor, so the icon inherits the surrounding text color and can be themed with CSS without editing the markup.
Are props forwarded to the SVG?
With Forward props on, a {...props} spread is added to the root svg element so callers can pass className, width, height, onClick, aria attributes, and more straight through.
Does my SVG get uploaded?
No. Parsing and conversion happen entirely in your browser, so the SVG markup and the generated component never leave your machine.
For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/svg-to-jsx/

For automation planning, fetch the canonical contract at /api/tool/svg-to-jsx.json.