♻️ Reusing SVG elements in HTML without copy-pasting it

Sometimes you might encounter the case where you want to use the same SVGs multiple times across one page. The first example that comes to my mind is the use of social media icons both in the navbar and footer. This is how I would approach this

function SomePage() {

 return (

// Invisible symbol 

<svg style={{ display: "none" }} version="2.0">

<defs>

<symbol id="linkedin-badge">

/\* This is where you would put the contents of the SVG 

 (everything that is inside SVG tag except the tag itself) \*/

</symbol>

</defs>

</svg>

// And this is how you would use it 

<svg

width="32"

height="32"

viewBox="0 0 32 32"

version="2.0"

>

<use href="#linkedin-badge" />

</svg>

)

}

Of course, you can just copy-paste it, but it will make the size of your HTML document bigger and delay the FCP.

<!-- -->You could also export it to a file, and load it through the image element, but it would cause flicks, which you probably don't want to have, especially when the element is above the fold.