Online SVG Tool — No Uploads, 100% Private

Preview, Edit & Convert SVGs Instantly

—Change

import * as React from "react";

const SVGComponent = (props) => (
  <svg
    width={32}
    height={32}
    viewBox="0 0 32 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className="text-svgp-accent"
   {...props}>
    <rect width={32} height={32} rx={4} fill="#eaeffd">
      </rect>
      <path d="M8 12L16 7L24 12V20L16 25L8 20V12Z" fill="#d5e0fb">
      </path>
      <path d="M8 12L16 17L24 12" stroke="#2563eb" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" fill="none">
      </path>
      <path d="M16 17V25" stroke="#2563eb" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
      </path>
      <path d="M8 12V20L16 25L24 20V12L16 7L8 12Z" stroke="#2563eb" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" fill="none">
      </path>
  </svg>
);

export default SVGComponent;

Converter

SVG to React Component

Paste or upload an SVG and get a ready-to-use React JSX component. The converter preserves attributes, cleans up namespaces, and outputs a functional component you can drop into any React project.

Outputs both React DOM JSX and React Native compatible markup.
Works entirely in the browser — your SVG never leaves your device.
One-click copy for fast pasting into components, tests, or documentation.

How it works

The converter parses the SVG string with a regex-based tokenizer, extracts the opening '<svg>' attributes, and converts each attribute to JSX form: kebab-case names become camelCase (e.g. stroke-width → strokeWidth), class becomes className, and numeric values are emitted as JSX expressions. The inner SVG markup is preserved and wrapped in a functional component that accepts props, so you can pass className, styles, or event handlers directly.

Common use cases

Building icon libraries and design systems in React.
Porting design handoffs from Figma/Sketch into JSX components.
Creating React Native vector assets from existing SVG artwork.