Skip to main content
iotools.cloudiotools.cloud

SVG to JSX Converter

Convert raw SVG markup into a ready-to-use React component. Renames attributes to their JSX form (class → className, stroke-width → strokeWidth, xlink:href → xlinkHref), turns inline style strings into style objects, and wraps everything in a component with optional TypeScript, forwardRef, size props, and prop spreading.

Input

Must start with an uppercase letter. Used as the React component name.

Output

React Component
Was this helpful?

Guides

Paste raw SVG markup and get back a ready-to-drop-in React component. The SVG to JSX Converter rewrites every SVG attribute to the name React expects, converts inline style strings into style objects, and wraps the result in a component you can export and reuse — no manual find-and-replace, and nothing to install.

Why you can't just paste SVG into JSX

JSX looks like HTML, but it isn't. React uses the DOM property names, so a lot of SVG's attributes are spelled differently in a component:

  • Hyphenated presentation attributes become camelCase: stroke-width → strokeWidth, fill-rule → fillRule, stroke-linecap → strokeLinecap, clip-path → clipPath.
  • Reserved words are renamed: class → className, for → htmlFor, tabindex → tabIndex.
  • Namespaced attributes are camelCased too: xlink:href → xlinkHref, xml:space → xmlSpace, xmlns:xlink → xmlnsXlink.
  • An inline style="fill: red; stroke-width: 1px" string must become an object: style={{fill: 'red', strokeWidth: '1px'}}.

aria-* and data-* attributes are left in their kebab-case form, because React accepts those as-is. Elements with no children are emitted self-closing (<path ... />), and SVG comments become JSX comments ({/* ... */}).

How to use it

  1. Paste your <svg>…</svg> markup into the input box.
  2. Give the component a name (it's normalized to a valid, capitalized identifier — my icon becomes MyIcon).
  3. Toggle the options to match your project, then copy or download the generated file.

Options

  • TypeScript — types the props as React.SVGProps<SVGSVGElement> and produces a .tsx-ready component.
  • React.forwardRef — wraps the component so a parent can attach a ref to the underlying <svg>, and sets displayName.
  • Replace width/height with props — drops the hard-coded width/height and adds width={width} / height={height} props (default 24), so the icon scales wherever you use it.
  • Spread extra props — appends {...props} to the root <svg> so callers can pass className, onClick, aria-label, and anything else straight through.

Does it change my SVG's appearance?

No. Attribute renaming and the style object are lossless — the rendered output is identical. The only optional change is swapping fixed width/height for props, which you opt into.

Is my SVG uploaded anywhere?

No. The conversion runs entirely in your browser (and, on the API, statelessly), so nothing you paste is stored or sent to a third party.

Common uses

Turning an exported Figma or Illustrator icon into a component, building a small in-house icon set, or migrating a pile of inline <svg> snippets to a component library — all without hand-editing attribute names.

svgjsxreactcomponentconvertertsx

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads