A Snippet to See all SVGs in a Sprite

The SVG sprite map usually looks like this:

<svg display="none">
  <symbol>...</symbol>
  <symbol>...</symbol>
  <symbol>...</symbol>
</svg>

In the past, I really liked this method for using the icon system (using as needed<use></use> element), but now I prefer to include SVG directly as needed. Nevertheless, the elves are still good and quite popular.<use></use>

What if you have a sprite map and want to see what it contains?

Here is a small piece of JavaScript code that will loop over all the symbols found and inject an SVG that uses each symbol...

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

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

That's it.

The above is the detailed content of A Snippet to See all SVGs in a Sprite. For more information, please follow other related articles on the PHP Chinese website!