Integrate SVGs in React as a Component

How to integrate SVG image (svg file) in your react app as a component

🙋‍♂️ Shubham Verma    🗓 October 9, 2020


Integrate SVGs in React as a Component


I

n this article, we'll see what is the SVG and how we can integrate SVGs in our React app. Sometime we have our own custom image/icon as SVG (.svg file), and we need to integrate this file in our app (need to show as an image). So in this article, we will learn, how we can integrate this svg file in our component.

What is SVG?

SVG is basically lines of codes that is written like XML, ( the format of thus code is XML ). SVG is a vector graphics image. SVG stands for Scalable Vector Graphics. It was developed in the late 1990s and that time it was not famous, But right now the SVGs are very popular. So many big organizations are using SVGs. SVG uses shapes, numbers, and coordinates instead of pixel grids like other image formats do. This makes it possible to zoom in and out of SVG images without losing any quality and gives SVG the ability to scale infinitely The file sizes of SVG images are usually small compared to other file.

Let's have an SVG:

Let's see an SVG file, the below file is an SVG file.

example.svg


If you integrate this file then it will look like this:

Integrate SVGs in React as a Component

Source: idkblogs.com


Integrate this SVG in React app:

Using the above SVG in your react componet is very simple, You need to import the above file in your component (The above SVG codes would be as it is. No need to change or no need to make a react component.). And after you need to use that as a component like described as:



After importing, you can use as you use other React component, as:



Thats it.



Support our IDKBlogs team

Creating quality content takes time and resources, and we are committed to providing value to our readers. If you find my articles helpful or informative, please consider supporting us financially.

Any amount (10, 20, 50, 100, ....), no matter how small, will help us continue to produce high-quality content.

Thank you for your support!




Thank you

I appreciate you taking the time to read this article. The more that you read, the more things you will know. The more that you learn, the more places you'll go. If you’re interested in Node.js or JavaScript this link will help you a lot.

If you found this article is helpful, then please share this article's link to your friends to whom this is required, you can share this to your technical social media groups also. You can follow us on our social media page for more updates and latest article updates.
To read more about the technologies, Please subscribe us, You'll get the monthly newsletter having all the published article of the last month.