Tuesday, 8 October, 2019 UTC


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>
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}" />
See the Pen
Visually turn a sprite into individual SVGs by Chris Coyier (@chriscoyier)
on CodePen.
That's all.
The post A Snippet to See all SVGs in a Sprite appeared first on CSS-Tricks.