Skip to content

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

What This Tool Does

SVG to JSX Converter is built for deterministic developer and agent workflows.

Convert an SVG into a clean React/JSX component with camelCased attributes, prop forwarding, and currentColor.

Use How to Use for execution steps and FAQ for constraints, policies, and edge cases.

Last updated:

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

Agent Invocation

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.

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.

Frequently Asked Questions

What does the SVG to JSX converter do?
It parses your SVG with the browser's DOMParser and rewrites it as a React component: hyphenated attributes become camelCase, class becomes className, inline styles become objects, and empty elements are self-closed.
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.