How Do I Convert an SVG File to Valid JSX?

Updated

Paste or drop your SVG into a converter such as svg2jsx.com, then copy the JSX output straight into your React component. That works for most icons and simple illustrations. You only need to hand-fix the result if your SVG uses attributes JSX rejects, or if it relies on external references the converter can't inline.

What the converter actually does

An SVG file is XML. JSX looks similar but follows JavaScript rules, so a raw SVG pasted into a component often fails to compile. The conversion is mostly mechanical:

  • Attribute names: class → className, and kebab-case attributes become camelCase (stroke-width → strokeWidth, fill-rule → fillRule).
  • Namespaced attributes: xlink:href becomes xlinkHref (or just href in modern React).
  • Self-closing tags: empty elements like <path> must be closed as <path />.
  • Style strings: inline style="fill:red" becomes an object, style={{ fill: 'red' }}.
  • Comments and metadata: XML declarations, <?xml ...?>, and editor comments are stripped.

The svg2jsx.com editor presents an Input SVG panel and a JSX Output panel, with a Star on Settings control and a file drop area labeled "Drag and drop your file here" plus an "Upload your file" option. You supply the SVG on one side and read the converted JSX on the other.

Step-by-step conversion

  1. Get your SVG. Export it from your design tool, or copy the markup from an .svg file opened in a text editor. Make sure it's the raw SVG source, not a PNG or a screenshot.
  2. Load it into the converter. Either drag and drop the file onto the drop zone, use the upload control, or paste the SVG markup into the Input SVG panel.
  3. Read the JSX Output panel. The tool rewrites the attributes and returns JSX-ready markup.
  4. Copy the output and paste it into your component file, inside the return of a function component or directly into your JSX tree.
  5. Verify it compiles. Run your build or dev server. A clean compile means the attribute conversion succeeded.

A minimal result looks like this:

const Icon = () => (
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none">
    <path d="M12 2 L2 22 L22 22 Z" fill="currentColor" />
  </svg>
);

export default Icon;

Checking the output before you ship it

Converters handle the common cases, but scan the result for these before committing:

  • Leftover kebab-case attributes. Any stroke-width, fill-rule, clip-path still in hyphen form will throw a React warning or error.
  • Unclosed tags. Every <path>, <circle>, <rect>, <line> needs a trailing />.
  • class still present. It should be className everywhere.
  • style as a string. It must be an object with camelCase keys.
  • xmlns and xmlns:xlink. Usually harmless to keep, but xmlns:xlink should become xmlnsXlink if you keep it.

Common problems and fixes

The icon renders at the wrong size or is cropped. The viewBox is missing or doesn't match the artwork. Add viewBox="0 0 minX minY width height" from the original SVG's root element. Without a viewBox, scaling behaves unpredictably.

Paths look broken or distorted. Some design tools export transforms (transform="translate(...) scale(...)") that interact badly with how you position the SVG. Either keep the transform attribute as-is (JSX accepts it) or flatten it in your design tool before export.

Nothing shows up at all. Check fill. If the original used fill="none" on the root and relied on child fills, confirm those survived. Also confirm the SVG isn't relying on an external stylesheet or a <use> reference to a symbol defined elsewhere — those don't travel with a copy-paste.

The converter output has xlink:href. Replace it with href. React supports href on <use> and <image> in current versions, and xlinkHref is the fallback for older setups.

Colors are hardcoded and you want them themeable. After conversion, swap literal fills for currentColor so the icon inherits your text color, or pass a fill prop through the component.

When to convert by hand instead

For a single small icon, editing the SVG directly in your component is often faster than a round trip through a tool — the changes are the same handful of attribute renames. Use the converter when you have several files, when the SVG is long enough that manual editing invites mistakes, or when you want a quick sanity check on which attributes need rewriting. Either way, the compile step is your real test: if React builds without warnings, the JSX is valid.