DevToolsmith

SVG to JSX Converter

Paste an SVG to get a React component: attributes become JSX names, styles become objects, and props are spread onto the svg so callers can set size, color and class. TypeScript types are one click away.

Runs 100% in your browser — nothing is uploaded

SVG
Tip: drop a file here416 chars · 416 bytes · 7 lines
JSX component
0 chars · 0 bytes · 0 lines

Example

SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="icon">
  <path d="M12 3v12"/>
  <path d="m7 10 5 5 5-5"/>
</svg>
DownloadIcon.tsx
export default function DownloadIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      className="icon"
      {...props}
    >
      <path d="M12 3v12" />
      <path d="m7 10 5 5 5-5" />
    </svg>
  );
}

Using the icon

import DownloadIcon from './DownloadIcon';

// Props go straight to the <svg>: size, color, class, events, accessibility
<DownloadIcon width={16} height={16} className="text-blue-600" aria-hidden="true" />
<DownloadIcon role="img" aria-label="Download" onClick={download} />

Decorative icons next to text should get aria-hidden="true"; icons that stand alone, like an icon-only button, need an accessible name such as aria-label.

SVG attributes in JSX

SVGJSX
stroke-width, stroke-linecap, fill-rulestrokeWidth, strokeLinecap, fillRule
classclassName
xlink:hrefxlinkHref (or plain href in SVG 2)
xmlns:xlinkxmlnsXlink
style="stop-color: red"style={{ stopColor: 'red' }}
viewBox, preserveAspectRatioUnchanged (already camelCase)

Optimize first

# Shrink the SVG first: removes editor metadata, rounds coordinates
npx svgo icon.svg -o icon.min.svg

# Or generate components in bulk at build time
npx @svgr/cli --typescript --out-dir src/icons -- assets/icons

Converting a whole page of markup instead? Use HTML to JSX. To match an icon’s color to your palette, try the Color Converter.

Frequently asked questions

How do I convert an SVG to a React component?

Paste the SVG or drop the .svg file into the converter above. It renames attributes to their JSX names (stroke-width to strokeWidth, class to className, xlink:href to xlinkHref), turns style attributes into objects, closes every tag, and wraps the result in a component that passes its props on to the <svg>.

How do I change the icon’s color from React?

Use currentColor for fill or stroke in the SVG, as most icon sets do. The icon then takes the CSS color of its parent or of a className you pass, for example className="text-red-600". A hard-coded color like #000 can be replaced with currentColor before or after converting.

Why are the props spread last?

Attributes written after {...props} would override what the caller passes. Spreading last means width, height, className or fill given to the component replace the defaults from the file.

Should I keep the width and height attributes?

Keep viewBox; it defines the coordinate system and lets the icon scale. width and height only set the default size; callers can override them through props, or you can remove them and size the icon with CSS.

Is this the same as SVGR?

It does the same conversion for one file at a time, in your browser, with nothing to install. For a whole icon folder, SVGR (@svgr/cli, or the plugins for Vite and webpack) generates components at build time.