How to display SVG image in React Component?

Hello Guys, How are you all? Hope You all are fine. Today in this tutorial we are going to learn about How to display SVG image in React Component? We will with examples and how to use SVG in react. So let’s start this tutorial without wasting your time.

How to display SVG image in React Component?

Solution 1: Import SVG Image like this

You need to import SVG image Just like React Component. Suppose I have Background.svg file then I have to import it like import { ReactComponent as MySvgBg} from ‘./Background.svg’; and then I can Use just like normally we are using component. Here is My example.

import { ReactComponent as MySvgBg} from './Background.svg';

Now, I can use MySvgBg the Same as Component Just like this.

const App = () => (
 <div>
   <MySvgBg />
 </div>
);

And now, We can use SVG images Just like the above method. Thank You.

Solution 2: Use svgr/webpack

You can also Use svgr/webpack. Just install it then configure your webpack.config.js file to use SVG images and then You are able to use SVG images. First of all Install svgr/webpack by running this command.

npm install @svgr/webpack --save-dev

OR

yarn add --dev @svgr/webpack

Then, Update your webpack.config.js file Just like this.

 module: {
    rules: [
      //Add This test and use
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      }
    ],
  },

Now you are all set to Use SVG images. Now yo can import SVG images Just like This.

import MySvgImg from 'your_svg_img_path/svg_image.svg'

<MySvgImg width={150} height={150} />

Then, You can Import All SVG images That you want to use Just like this And You can use it in Your React App. Thank you.

Solution 3: Use .default approach

Simply You can add your SVG image path in your img tag’s src But After path You need to use .default word and then Your SVG image will be rendered.

<img src={require('../../you_svg_img.svg').default} alt='svg_image' />

Just like the above method, you will be able to use SVG images. Thank you.

Conclusion

It’s all About How to display SVG image in React Component?. I hope You understand how to use it. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• Warning: A component is changing an uncontrolled input of type text to be controlled
• Unexpected reserved word ‘await’
• How to use a switch Case statement inside a React component?
• type is invalid — expected a string (for built-in components) or a class/function
• Component definition is missing displayName (react/display-name)