34

A Snippet to See all SVGs in a Sprite

 4 years ago
source link: https://www.tuicool.com/articles/26rAvaY
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

I think of an SVG sprite as this:

<svg display="none">
  <symbol id="icon-one"> ... <symbol>
  <symbol id="icon-two"> ... <symbol>
  <symbol id="icon-three"> ... <symbol>
</svg>

I was long a fan of that approach for icon systems ( <use> -ing them as needed), but I favor including the SVGs directly as needed these days. Still, sprites are fine, and fairly popular.

What if you have a sprite, and you wanna see what’s in it?

Here’s a tiny bit of JavaScript that will loop through all the symbols it finds and inject a SVG that uses each one…

const sprite = document.querySelector("#sprite");
const symbols = sprite.querySelectorAll("symbol");

symbols.forEach(symbol => {
  document.body.insertAdjacentHTML("beforeend", `
  <svg width="50" height="50">
     <use xlink:href="#${symbol.id}" />
  <svg>
`)
});

See the Pen
Visually turn a sprite into individual SVGs by Chris Coyier (@chriscoyier)
on CodePen.

That’s all.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK