DEV Community

arenasbob2024-cell
arenasbob2024-cell

Posted on • Originally published at viadreams.cc

SVG to React Component: The Complete 2026 Guide

#react #svg #javascript #webdev

SVGs are the best format for icons and illustrations on the web. But using them in React requires transformation. Here is everything you need to know.

The Problem

SVG uses HTML attributes that break in JSX:

SVG Attribute JSX Equivalent
class className
stroke-width strokeWidth
fill-opacity fillOpacity
font-size fontSize
clip-path clipPath
xlink:href xlinkHref

SVGR: The Industry Standard

SVGR converts SVG files into React components automatically:

npx @svgr/cli icon.svg --out-dir src/icons
Enter fullscreen mode Exit fullscreen mode

With Vite:

import svgr from 'vite-plugin-svgr';
export default defineConfig({ plugins: [svgr()] });

// Usage
import { ReactComponent as Logo } from './logo.svg';
Enter fullscreen mode Exit fullscreen mode

Always Optimize First

Run SVGO before converting to strip metadata and redundant attributes:

npx svgo icon.svg -o icon.min.svg
Enter fullscreen mode Exit fullscreen mode

Typical reduction: 30-60%.

Reusable Icon Component 

const Icon = ({ size = 24, color = 'currentColor', ...props }) => (
  <svg width={size} height={size} viewBox='0 0 24 24' fill='none'
       stroke={color} strokeWidth={2} {...props}>
    <polyline points='20 6 9 17 4 12' />
  </svg>
);
Enter fullscreen mode Exit fullscreen mode

Accessibility 

// Meaningful icon
<svg role='img' aria-labelledby='title'>
  <title id='title'>Search</title>
  <path d='...' />
</svg>

// Decorative icon
<svg aria-hidden='true'><path d='...' /></svg>
Enter fullscreen mode Exit fullscreen mode

Try It Online

Convert SVG to React JSX with DevToolBox SVG to JSX - handles attribute conversion, optimization, TypeScript output.

How do you manage SVGs in React? Share your approach!

Top comments (0)