SVG to JSX Converter

JSX looks like markup but compiles to JavaScript function calls, and each attribute becomes a property on a props object. That is why a few SVG attributes must be renamed before React accepts them:

Pasting raw SVG into a component usually "works" until it hits one of these: React logs an invalid DOM property warning for stroke-width, and Babel or SWC stop with a namespace error on xlink:href. Note that xlink:href is legacy SVG 1.1 syntax; plain href works in every current browser.

How you ship an icon matters more than how small its file is:

Inline components are the most flexible: props, hover states, dark mode and accessibility all just work. The trade-off is that every icon's path data lives in your JavaScript and in every server-rendered page that uses it. For a few dozen icons that is negligible; for hundreds, a sprite sheet referenced with <use> keeps HTML and bundles small. External <use> references must be same-origin.

Design tools export far more than the drawing. A typical Illustrator or Inkscape file carries an XML prolog, generator comments, <metadata>, sodipodi:namedview, layer ids like Layer_1 and coordinates with four decimals. None of it affects rendering, and this converter removes it every time.

The optional optimizer goes further, and only does what cannot change the picture:

• Rounds numbers. In a 24-unit viewBox, two or three decimals are far below one rendered pixel, so M12.0001,2.2500 becomes M12 2.25.
• Compacts path data with a real path parser, so arc flags and run-together numbers like 1.5.5 (1.5, then .5) survive.
• Drops empty groups and defs, and unwraps groups that have no attributes.
• Removes default values such as stroke-miterlimit="4", but only where no ancestor sets a different value, and never inside <defs> or <symbol>, whose content inherits from where it is used.

What is not safe: rounding a tiny viewBox (such as 0 0 1 1) to two decimals, deleting ids that CSS or scripts target, and deleting the viewBox, which stops an icon from scaling. Some older optimizer presets removed the viewBox by default, so check yours. For build pipelines, SVGO is the standard optimizer and SVGR (via @svgr/webpack or vite-plugin-svgr) turns imported .svg files into React components at build time; this page is for one-off conversions and quick checks.

It depends on what the icon does. Most icons sit next to visible text and are decorative, so hide them from screen readers:

<button>
  <TrashIcon aria-hidden="true" />
  Delete
</button>

An icon that carries meaning on its own, such as a status badge, needs an accessible name. Give the svg role="img" and either an aria-label or a <title> referenced with aria-labelledby. The Title prop option generates exactly that, with an id from React's useId so several icons on a page never share one:

<WarningIcon title="Payment failed" />

For icon-only buttons, put the label on the button (aria-label="Delete") and keep the icon hidden. The rule behind all of this is WCAG 1.1.1 Non-text Content.

React Native has no DOM, so SVG comes from the react-native-svg library, whose elements are imported components: Svg, Path, G, Circle, LinearGradient and so on. The React Native tab handles the differences for you:

• Element names are capitalized and imported from react-native-svg.
• There is no CSS, so <style> blocks and className do nothing. Styles must become props (fill, strokeWidth), which is why Inline styles matters here.
• Sizes are numbers in density-independent pixels; 1em does not exist, so it becomes a number.
• currentColor works and resolves to the color prop on Svg.
• Filter support in react-native-svg is recent and covers only some primitives, so check the library's docs before relying on one.

If you import many .svg files directly, react-native-svg-transformer lets Metro do this conversion at build time.