Souus Tools
Sponsor

Development

SVG to JSX — Convert SVG into a React Component

Turn SVG markup into a ready-to-paste React component with camelCase props, currentColor theming, TypeScript typings, and a safe preview.

Free to use No sign-up Runs in your browser

Tool workspace

The file is read in the page and never uploaded.
ArrowRightIcon.tsx
import type { SVGProps } from 'react'

function ArrowRightIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path
        d="M5 12h14"
      />
      <path
        d="m12 5 7 7-7 7"
      />
    </svg>
  )
}

export default ArrowRightIcon

Parsing and conversion run in your browser. No markup or file is sent to a server.

Why SVG Cannot Be Pasted Straight into JSX

JSX is not HTML. React expects DOM property names, so every hyphenated SVG presentation attribute has to become camelCase: stroke-width turns into strokeWidth, stop-color into stopColor, and clip-rule into clipRule. Namespaced attributes such as xlink:href have no colon in JSX and become xlinkHref. Inline style must be an object rather than a string, and comments or XML declarations are not valid JSX at all. At the same time SVG is case sensitive in a way HTML is not: linearGradient, clipPath, feGaussianBlur and textPath break if they are lowercased, which is exactly what an HTML-oriented converter does. This tool parses SVG on its own terms, restores canonical casing even when the source was already flattened, and leaves data- and aria- attributes hyphenated because React keeps those as written.

How to Convert an Icon

  1. 1Paste the SVG or open a .svg file; the preview confirms you copied the icon you meant, with any scripts stripped first.
  2. 2Set the component name. A file name such as arrow-right.svg becomes ArrowRight automatically.
  3. 3Turn on currentColor if the icon should inherit text colour instead of carrying a hard-coded hex value.
  4. 4Remove width and height when the icon should scale with its container, keeping only the viewBox.
  5. 5Copy the component or download it as a .tsx or .jsx file and drop it into your project.

When You Need This Conversion

Add one icon without a build step

Inline a single icon as a component rather than installing and configuring an SVG loader for the whole project.

Make an exported icon themeable

Replace the fixed colours a design tool exported with currentColor so the icon follows text colour in light and dark themes.

Fix an icon that renders blank

Recover gradients, masks and filters that stopped working because a previous conversion lowercased linearGradient or clipPath.

Type an icon for a component library

Emit SVGProps<SVGSVGElement> typings and prop spreading so consumers can pass className, size or event handlers.

Frequently asked questions

Why keep the viewBox when width and height are removed?

The viewBox defines the coordinate system and the aspect ratio, so it is what lets the icon scale. Fixed width and height attributes override CSS sizing in some browsers, which is why removing them and sizing with CSS or a size prop is the usual pattern for an icon component.

When should I not use currentColor?

Only for single-colour icons. A multi-colour illustration, a gradient fill, or a deliberate transparent cut-out would collapse into one colour. The tool already leaves none, transparent and url() references alone for this reason, but a two-tone icon still needs its colours reviewed by hand.

Is the preview safe if the SVG came from somewhere untrusted?

The preview is rendered from a re-serialised copy with script elements, event handler attributes and javascript: URLs removed, so nothing in the pasted markup executes. The JSX output is separate and still contains everything the parser understood, so review it before shipping markup from an unknown source.

Does this replace SVGR?

For a handful of icons, yes, and with no dependency. SVGR is still the right choice when you want icons transformed automatically at build time, with SVGO optimisation and project-wide templates applied to a whole directory.