Un fragmento para ver todos los SVG en un Sprite | Programar Plus ▷ Tutoriales

Pienso en un sprite SVG como este:

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

Durante mucho tiempo fui un fanático de ese enfoque para los sistemas de iconos (<use>-haciéndolos según sea necesario), pero estoy a favor de incluir los SVG directamente según sea necesario en estos días. Aún así, los sprites están bien y son bastante populares.

¿Qué pasa si tienes un objeto y quieres ver qué contiene?

Aquí hay un pequeño fragmento de JavaScript que recorrerá todos los símbolos que encuentre e inyectará un SVG que usa cada uno …

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="https://css-tricks.com/a-snippet-to-see-all-svgs-in-a-sprite/#${symbol.id}" />
  <svg>
`)
});

Ver la pluma
Convierta visualmente un objeto en SVG individuales por Chris Coyier (@chriscoyier)
en CodePen.

Eso es todo.