How to Convert SVG to React or React Native Component

When working with React or React Native, you may want to convert SVG files into components for easier integration and dynamic rendering. This allows you to treat SVGs just like any other React component, making them highly reusable and customizable.

Here’s how you can convert an SVG to a React or React Native component:

1. Use SVG2JSX to Convert SVG to JSX (React)

SVG2JSX Tool: This is a simple and efficient tool to convert any SVG file into JSX format, allowing you to use SVGs directly in React.

Steps:

Visit SVG2JSX.
Paste your SVG code into the editor.
Copy the JSX code it generates.
Use the JSX code directly in your React component.

const MySVGComponent = () => (
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
  </svg>
);
export default MySVGComponent;

2. Using SVGR Playground for React and React Native

For more customization, like React Native compatibility, use SVGR:

SVGR Playground: This tool converts SVGs to JSX and allows you to export them for both React and React Native. It also provides options to remove dimensions and optimize the SVG code.

Steps

Visit the SVGR Playground.
Paste your SVG code in the editor.
Toggle between the options for React or React Native components.
Copy the JSX or React Native component code.

For React:

import * as React from 'react';

const MySVG = (props) => (
  <svg width="100" height="100" {...props}>
    <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
  </svg>
);

export default MySVG;

For React Native:

import * as React from 'react';
import Svg, { Circle } from 'react-native-svg';

const MySVG = (props) => (
  <Svg width="100" height="100" {...props}>
    <Circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
  </Svg>
);

export default MySVG;

3. Use in Your React or React Native Project

Once you have your JSX or React Native component:

For React:

Import the component in any of your files and use it as a React component:

import MySVGComponent from './MySVGComponent';

const App = () => <MySVGComponent />;
export default App;

For React Native:

Install react-native-svg:

npm install react-native-svg

Then, use the converted SVG as a React Native component:

import MySVG from './MySVG';

const App = () => <MySVG />;
export default App;

Why Convert SVG to React or React Native Components?

Optimization: Tools like SVGR help optimize SVGs for better performance.

Customizable: You can change colors, size, and other properties using props in React or React Native.

Reusable: Converted SVGs become reusable components across your project.

SeeB4Coding