XPRTIX SVG

Convert SVG to a React component.

Open an SVG, tidy it up and export it as JSX you can paste into your project. Nothing is uploaded.

pen + nodesgradientsboolean opsartboardsSVG → PNG
Drop SVG files or click to browse. Each file opens in its own tab. SVG

XPRTIX SVG

Convert SVG to a React component: how it works

From SVG to JSX

React needs SVG attributes in camelCase and uses className instead of class, so pasting raw SVG into a component fails. Open the SVG here and choose Export → React: the result is a ready-to-paste component with the attributes converted.

Make it small first

Icons exported from design tools carry metadata, editor attributes and extra decimals. The Optimise option removes those and rounds numbers to the decimals you choose, so the component is short. The export preview shows the size.

Other ways to use an SVG

The same Export dialog gives a CSS data URI to use the SVG as a background image, plain or optimised SVG, and PNG, JPG or WebP. Everything runs on your device.

What it does

A full SVG editor that runs in your browser

Draw, reshape and clean up icons, logos and illustrations, or open an SVG you already have and change it. There is nothing to install and no account, and your files never leave your device.

  1. 01

    Edit paths node by node

    Draw with the pen or pencil, then drag anchor points and Bézier handles. Add or remove nodes, switch a node between corner and smooth, and open or close a path. Pen, rectangle, ellipse, line, polygon, star and text tools are all included.

    In your browser
  2. 02

    Style with fills, strokes and gradients

    Set solid colours, linear and radial gradients with any number of stops, stroke width, caps, joins, dashes and opacity. The eyedropper copies a style from one shape to another.

    In your browser
  3. 03

    Combine shapes with boolean operations

    Union, subtract, intersect and exclude paths to build new shapes, turn a stroke into an outline, and simplify a rough drawing into fewer nodes.

    In your browser
  4. 04

    Several SVGs in one document

    Every file opens as a tab, and each tab can hold several artboards, so an icon set lives in one place. Layers can be grouped, hidden, locked and reordered, with align, distribute and snapping to keep things tidy. Open tabs survive a page reload.

    In your browser

Export

Export as SVG, PNG, JPG, WebP or React

Preview the result and its file size before you save it.

Vector

  • Readable SVG, or an optimized one with metadata, editor attributes and unused definitions removed.
  • Choose how many decimals paths keep. Fewer decimals make smaller files.
  • A React (JSX) component, or a CSS data URI to paste straight into a stylesheet.

Raster

  • PNG, JPG and WebP at 1×, 2× and 4×, or any size you set.
  • An optional background colour, for formats with no transparency.
  • A ZIP of every artboard in one go.

Keyboard

  • V select, A edit nodes, P pen, T text.
  • ⌘/Ctrl+D duplicate, G group, Z undo.
  • Press ? inside the editor for the full list.

Transparency

What leaves your device

Nothing you open or draw.

Stays on your device

  • Every SVG you open, paste or draw, and every export.
  • Your open tabs, kept in this browser tab so a reload brings them back.

Sent to the server

  • Nothing. The editor has no upload step.

Recorded

  • Nothing from the editor.

SVG guides

Common SVG jobs

Questions

Asked often

Does it work with TypeScript?

The component is plain JSX; add your own props typing if you need it.

Can I change colours before exporting?

Yes. Edit fills and strokes in the editor first, for example to use currentColor.

Is my SVG uploaded?

No. The conversion happens in your browser.

Can I paste SVG code instead of a file?

Yes. Use Paste SVG code on the start screen, then export as React.

Should I optimise before exporting to React?

Usually, yes. Optimising removes editor attributes and extra decimals, so the component is shorter.

Does the component keep the viewBox?

Yes. The viewBox is kept so the icon scales with its width and height.