Skip to content
ToolQivo

SVG to JSX

Turn an SVG into a React component with the attributes React expects.

Developer Tools Reviews Free · no sign-up

Preview

Quick Tool Overview

The SVG to JSX converter fixes the hyphenated presentation attributes and the case-sensitive viewBox that silently break an inlined icon, then makes the result useful by spreading props and offering currentColor.

What it does
Turns SVG markup into a React component
You give it
SVG from a design tool or an icon set
You get back
A component with props spread and colours inheritable
Best for
Inlining icons into a React codebase
Developer Tools Free, unlimited use No sign-up Runs in your browser

About the SVG to JSX

SVG has more hyphenated attributes than HTML, and every one of them is a JSX error waiting to happen: stroke-width, stroke-linecap, fill-rule, clip-path, and the case-sensitive viewBox that a lowercase viewbox silently breaks.

This converts all of them, wraps the result in a component, and makes it useful rather than merely valid. Props are spread onto the root element so the icon can take a className or a size from wherever it is used, and fill or stroke can be switched to currentColor in one option — which is what makes an icon inherit the text colour around it instead of being stuck at whatever the designer exported.

Key features of the SVG to JSX

viewBox keeps its capital

A lowercase viewbox is ignored entirely and nothing warns you — which is why the icon scales wrongly and the cause is so hard to find.

Presentation attributes mapped

stroke-width, stroke-linecap, fill-rule, clip-path and the rest, each camelCased the way React expects.

currentColor option

Switch fill or stroke to currentColor and the icon follows the surrounding text colour, including on hover.

Props spread onto the root

So the component can take a className, a size or an aria-label where it is used rather than being fixed at export time.

Ready to paste

The output is a complete named export, not a fragment you have to wrap yourself.

How to use the SVG to JSX

  1. 1

    Paste your SVG

    Straight from a design tool, an icon set or a file.

  2. 2

    Name the component

    Something like ChevronIcon; the export is named for it.

  3. 3

    Set the colour handling

    Switch fill or stroke to currentColor so the icon follows the surrounding text.

  4. 4

    Copy the component

    Paste it into a file and use it like any other component.

Frequently asked questions

Because SVG attributes are case-sensitive and JSX passes them through as written. A lowercase viewbox is ignored entirely, which is why the icon scales wrongly and nothing warns you.

Reviews of the SVG to JSX

What people who use the SVG to JSX think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the SVG to JSX. It takes half a minute and no account.

Write the first review

More developer tools