How to add svg image in react js?

August 26, 2024

Hi Friends 👋,

Welcome To aHoisting!

To add svg image in react js, you can import './man.svg' and use src={mySvg}. It will add svg image in react js.

Today, I am going to show you, how to add svg image in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React from 'react';
import mySvg from './man.svg';

Step 3: Create a Component.

You can use src={mySvg} to add svg image in react js.

<div>
  <img src={mySvg} alt="My SVG"  height={500} width={500}/>
 </div>

Add svg image example.

The below code is an example of a React. You have to import './man.svg' and set <img src={mySvg} alt="My SVG" height={500} width={500}/> to add svg image in react js.

App.js

import React from 'react';
import mySvg from './man.svg';

function App() {
  return (
    <div>
      <img src={mySvg} alt="My SVG"  height={500} width={500}/>
    </div>
  );
}

export default App;

or

import React from 'react';
    function App() {
      return (
        <div>
          <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
            <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
          </svg>
        </div>
      );
    }  
export default App;

In the above code example, I have used the <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> to add svg image in react js.

Check the output of the above code.

All the best 👍