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?
How to display SVG image in React Component?
To display SVG image in React Component 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 Then, Update your webpack.config.js file. 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’ Now, 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.
display SVG image in React Component
To display SVG image in React Component 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: MySvgBg And now, We can use SVG images Just like the above method. Thank You.
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)