FlowingDev

SVG in React: From static image to dynamic component

Learn how to transform static SVG images into dynamic, reusable React components (JSX/TSX) that can accept props, change colors, and more.

Try the tool: SVG to JSX

In one sentence

SVG to JSX turns your vector image's code into a reusable React component, making it dynamic and controllable with props instead of being just a static file.

The problem it solves

In the olden days of the web (like, five years ago), if you wanted to display an SVG icon, you'd probably just sling it in an <img> tag: <img src="/icons/user.svg" alt="User profile" />. Job done. Ship it.

But this simple approach is a bit of a trap. Your SVG is now a black box. Want to change its color when the user hovers over its containing button? Tough luck. The browser treats it like any other image file (a JPG, a PNG), and you can't easily style its guts with CSS. Want to animate one of the paths inside the icon? Nope. Want to switch its color for a dark mode theme? You're looking at creating a whole new file (user-white.svg) and writing logic to swap the src. It gets messy fast.

"Aha!" says the clever developer. "SVG is just XML markup! I'll just copy the code from the .svg file and paste it right into my component's return statement!"

// MyComponent.js
const MyComponent = () => (
  <div>
    <p>My Profile</p>
    {/* I just pasted this from a .svg file! */}
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="black"/>
    </svg>
  </div>
);

This is called "inlining," and it's a huge step up. Now the SVG is part of the DOM, and you can style it with CSS. But you've traded one problem for another.

  1. It's Clunky: That blob of SVG code makes your component harder to read. Imagine if you had five icons in there.
  2. It's Not Reusable: Need that user icon somewhere else? Get ready to copy and paste that entire blob all over again.
  3. It's Not JSX: React has its own dialect of HTML. Attributes like stroke-width need to be camelCased to strokeWidth, and class becomes className. Forgetting to convert these can lead to silent failures or loud console warnings.

The real solution is to treat icons not as static assets, but as first-class citizens of your component ecosystem. You want <UserIcon color="blue" size={24} />. This is the problem SVG to JSX conversion solves: it automates the boilerplate of turning raw SVG markup into a clean, reusable, and prop-driven React component.

How it works under the hood

Turning a blob of text into a slick React component might seem like magic, but it's a predictable, step-by-step process. Let's peel back the curtain.

Step 1: Parsing the SVG Markup

First, the tool has to understand the SVG. Since SVG is a dialect of XML, it can be parsed into a tree structure of nodes, just like an HTML document. Each element (<svg>, <path>, <g>, etc.) becomes a node, and its attributes (width, fill, d, etc.) become properties of that node.

So, this:

<svg width="24" height="24">
  <path fill-rule="evenodd" d="..." />
</svg>

Is understood by the parser as a tree:

  • svg node with attributes width="24" and height="24"
    • path node with attributes fill-rule="evenodd" and d="..."

Step 2: JSX-ifying the Attributes

This is where the React-specific translation happens. The parser walks the node tree and converts the attributes to be JSX-compliant.

  • Camel-casing: Any attribute with a hyphen (kebab-case) is converted to camelCase. fill-rule becomes fillRule, stroke-width becomes strokeWidth.
  • Keyword mapping: Reserved JavaScript keywords are swapped. The most common one is class, which becomes className.
  • Style attributes: A style="fill:red; stroke:blue" attribute is converted into a JavaScript object: style={{ fill: 'red', stroke: 'blue' }}.

So, <path fill-rule="evenodd" class="icon-path"> transforms into the JSX equivalent: <path fillRule="evenodd" className="icon-path">.

Step 3: Wrapping in a Component

With the SVG tree now speaking fluent JSX, the next step is to wrap it in a standard React functional component structure. The simplest version looks like this:

import React from 'react';

const MyIcon = () => {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24">
      {/* ... all the JSX-ified paths and other elements ... */}
    </svg>
  );
};

export default MyIcon;

This already gives you a reusable <MyIcon /> component, which is a big win. But the real power comes from making it dynamic.

Step 4: Adding Props and currentColor

This is the secret sauce. A good converter doesn't just hardcode the SVG's original attributes. It makes them configurable.

  • Spreading Props: The component is modified to accept props and spread them onto the root <svg> element. This is often done using the ...rest syntax. Now you can pass any standard SVG attribute (like width, height, className, or aria-label) directly to your component.

  • The currentColor Trick: This is a game-changer for styling. The converter will find hardcoded fill and stroke attributes that define the icon's color (e.g., fill="#000000") and replace them with the special CSS keyword currentColor.

currentColor tells the browser, "Whatever the CSS color property is on this element, use that for the fill/stroke." This means your icon now behaves like text. If you wrap your icon in a div and set color: blue, the icon turns blue.

// The upgraded component
const MyIcon = ({ color = 'currentColor', size = 24, ...rest }) => {
  return (
    <svg 
      width={size} 
      height={size} 
      fill={color} // or applied directly to paths
      {...rest}
    >
      <path d="..." fill="currentColor" />
    </svg>
  );
};

Step 5: Forwarding Refs

Sometimes, you need to get a direct handle on the actual <svg> DOM element from a parent component, maybe to measure its position or use it with a third-party library. A normal functional component hides its internal DOM structure. The solution is React.forwardRef.

A sophisticated converter will wrap the component in React.forwardRef, which creates a conduit to pass a ref from the parent right through to the underlying <svg> tag.

The final, production-grade component often looks something like this (TypeScript example):

import * as React from 'react';

type Props = React.SVGProps<SVGSVGElement>;

const MyIcon = React.forwardRef<SVGSVGElement, Props>((props, ref) => (
  <svg ref={ref} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path d="..." fill="currentColor" />
  </svg>
));

MyIcon.displayName = 'MyIcon'; // Good for debugging
export default MyIcon;

Real-world stories

The Theming Nightmare

A frontend team was building a beautiful web app that featured both a light and a dark mode. They used about 50 icons, all implemented as <img src="/icons/whatever.svg">. The icons were black. When they shipped the dark mode, panic set in: all 50 black icons vanished against the new dark background. Their first frantic "fix" was to export a second set of white icons (whatever-dark.svg) and write gnarly conditional logic (isDarkMode ? 'whatever-dark.svg' : 'whatever.svg') everywhere. It was a maintenance disaster.

Then, a developer introduced an SVG-to-JSX workflow. They ran a script that converted all 50 SVGs into React components, crucially replacing all fill="black" attributes with fill="currentColor". They replaced all the <img> tags with their new icon components, like <WhateverIcon />. Instantly, the icons inherited their color from the parent text color, which was already handled by the theme's CSS. Light mode: black text, black icons. Dark mode: white text, white icons. It just worked.

Lesson: Inlining SVGs as components lets them integrate seamlessly with your app's existing design system and styling, saving you from asset-management hell.

The Animated Checkmark

A product manager wanted a "delightful" animation: when a user completes a form, a checkmark should dynamically draw itself on screen. Using an animated GIF was out—it looked pixelated and was a hefty file. The developer tried to find a library, but nothing quite fit the custom checkmark design.

Taking matters into her own hands, she took the static checkmark SVG from the designer and converted it into a JSX component. This gave her direct access to the <path> element of the checkmark within her React code. Using a simple CSS transition on the stroke-dasharray and stroke-dashoffset properties of that path, she was able to create the exact "drawing" effect she wanted. The animation was buttery smooth, infinitely scalable, and took less than 1KB of code.

Lesson: Converting an SVG to a component unlocks granular control over its individual parts, making complex CSS or JavaScript-driven animations possible.

Common mistakes and traps

  • Forgetting accessibility. An icon that conveys meaning (like a "close" X) isn't just decoration. If you strip out the <title> tag during conversion, a screen reader might announce it as "group" or just ignore it. Always ensure your final component has an appropriate aria-label prop or an accessible name via a <title> element inside the SVG. A good component will render as <svg role="img" ...>.
  • Bloating the bundle. Inlining SVGs means their code is now part of your JavaScript bundle. For a few dozen small UI icons, this is a net win (fewer HTTP requests). But if you try to inline a huge, complex illustration with thousands of paths, you can seriously bloat your bundle size and slow down initial page load. For large, static illustrations, <img> is still a perfectly valid choice.
  • Ignoring optimization first. SVGs exported from design tools like Figma or Adobe Illustrator are notoriously messy. They contain editor metadata, comments, hidden layers, and overly precise decimal values. Shoving this directly into a JSX component results in bloated, hard-to-read code. Always run your SVGs through an optimizer like SVGO before converting them. This can often reduce the code size by 50% or more.
  • Manual editing becomes a sync issue. You convert icon.svg to Icon.jsx. Then you manually tweak Icon.jsx to add a feature. A week later, the designer gives you an updated icon.svg. Now you have a choice: re-run the conversion and lose your manual edits, or try to manually patch the new design into your edited JSX. The source of truth should be the .svg file; the conversion to JSX should be a repeatable, automated script.

Why it belongs on your radar

You should think about converting SVGs to JSX whenever you're building a component-based web application (React, Preact, etc.) and your icons need to be more than just static pictures.

It's the right tool for the job when:

  • You need icons to change color, size, or stroke width based on state or props.
  • You're building a design system or component library and need a scalable, consistent way to manage icons.
  • You want to animate parts of an icon.
  • You're optimizing for performance and want to reduce the number of network requests by inlining critical icons.

In modern frontend development, treating your icons as components isn't a hack—it's the standard for building dynamic, maintainable, and high-performance user interfaces.

Go deeper

Theory done. Time to get your hands dirty — 100% in your browser.

Try the tool: SVG to JSX