Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 23, 2021 08:30 pm GMT

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>        <use href="#linkedin-badge" />      </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.


Original Link: https://dev.to/bmstefanski/reusing-svg-elements-in-html-without-copy-pasting-it-3hfo

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To