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

                                <?xml version="1.0" encoding="UTF-8"?>
                                <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <defs>
                                        <path d="M12,12 C14.21,12 16,10.21 16,8 C16,5.79 14.21,4 12,4 C9.79,4 8,5.79 8,8 C8,10.21 9.79,12 12,12 Z M12,14 C9.33,14 4,15.34 4,18 L4,20 L20,20 L20,18 C20,15.34 14.67,14 12,14 Z" id="path-12"></path>
                                    </defs>
                                    <g>
                                        <g id="admin" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) ">
                                            <g id="icon/social/person_24px" transform="translate(3.000000, 0.000000)">
                                                <mask id="mask-12" fill="white">
                                                    <use xlink:href="#path-12"></use>
                                                </mask>
                                                <g fill-rule="nonzero"></g>
                                                <g id="Group" mask="url(#mask-12)" fill="#344252">
                                                    <g id="↳-Color">
                                                        <rect id="Rectangle-13" x="0" y="0" width="24" height="24"></rect>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                    

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

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:

                        import {ReactComponent as SVGIcon} from '../assets/icons/example.svg'; // Correct the SVG path
                    

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

                       <SVGIcon />
                    

Thats it.