How to Convert SVG to React Components: Complete Guide

Source: Dev.to

Benefits of using SVG as React components

• Dynamic props – Change fill, stroke, width, height, etc., via component props.
• Tree shaking – Only bundle the icons you actually use.
• TypeScript support – Full type safety with React.SVGProps.
• Animation – Animate with CSS or libraries like Framer Motion.

Attribute conversion

// React JSX

Remove xmlns

In JSX, the xmlns attribute is unnecessary.

// Remove this

// Keep just

Example React component

import React from 'react';

const MyIcon: React.FC> = (props) => (
  
  
);

export default MyIcon;

Tools for conversion

• SVG to React Converter – Instantly transforms SVG markup into React components with:
  • Automatic attribute conversion to camelCase
  • className replacement
  • TypeScript SVGProps typing
  • Props spread for customization
• SVG to JSX Converter – Converts SVG to JSX without wrapping it in a component.
• HTML to React Converter – Converts full HTML to React components.
• HTML to JSX Converter – Transforms HTML to JSX syntax.