SVG to JSX / React Component

Convert SVG to JSX for React

SVG markup is almost valid JSX — almost. React requires className instead of class, camelCase attributes such as strokeWidth, and style as a JavaScript object. Pasting an exported icon into a component therefore produces errors and warnings. This SVG to JSX converter rewrites the markup correctly and wraps it in a component you can import anywhere.

Example

// input
<svg class="icon" stroke-width="2" style="fill-opacity:0.2">…</svg>

// output
import * as React from 'react';

const HeartIcon = (props) => (
  <svg className="icon" strokeWidth="2" style={{ fillOpacity: 0.2 }} {...props}>
    …
  </svg>
);

export default HeartIcon;

What gets converted

• Attributes: hyphenated names become camelCase (stroke-linecap → strokeLinecap, fill-rule → fillRule); class → className; namespaced ones like xlink:href → xlinkHref. data-* and aria-* stay as they are.
• Inline styles: style="fill-opacity:0.2;fill:currentColor" becomes an object, with numeric values kept as numbers.
• Clean-up: the XML declaration, DOCTYPE, comments and Inkscape/Sodipodi editor attributes are dropped.
• Text: braces in text nodes are escaped so JSX does not treat them as expressions.
• Props: {...props} is spread onto the root <svg>, so you can pass className, aria-label or event handlers.

Options

• TypeScript: adds SVGProps<SVGSVGElement> typing — save the result as .tsx.
• width / height: keep the original values, remove them so CSS controls the size, or set them to 1em so the icon scales with the surrounding font size like an icon font.
• React.memo: wraps the component to skip re-renders when props do not change.

Tips for icon components

Replace hard-coded colours with currentColor so icons inherit the text colour, and run the SVG through the SVG optimizer first for smaller components. For React Native, use SVG to React Native, which outputs react-native-svg elements. Converting HTML rather than SVG? The HTML to JSX converter handles that.

Building an icon library

Convert each icon once, name the components consistently (ArrowLeftIcon, CheckIcon…) and export them from an index.js file. Because each icon is a separate component, bundlers can tree-shake unused ones. With dimensions set to 1em and colours set to currentColor, the icons size and colour themselves from the surrounding text, so a button only needs a font size and colour for text and icon to match.

Inline SVG versus img tags

Using an SVG as a component (inline SVG) lets you style parts of it with CSS, animate paths, change colours on hover and add accessible titles. Loading it with an <img> tag is simpler and cacheable but the graphic cannot be styled from outside. For UI icons that follow theme colours and states, components are usually the better choice; for large illustrations that never change, an image file keeps your JavaScript bundle smaller.

Accessibility

Decorative icons should be hidden from screen readers with aria-hidden="true", which you can pass as a prop. Meaningful icons need a label: pass aria-label and role="img", or keep a <title> element inside the SVG.

Privacy

The tool runs entirely in your browser. Nothing you type or paste is sent to our servers.