Ein Ausschnitt, um alle SVGs in einem Sprite anzuzeigen

Ich stelle mir einen SVG-Sprite so vor:

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

Ich war lange ein Fan dieses Ansatzes für Icon-Systeme (<code><use></code>-Nutzung bei Bedarf), aber heutzutage bevorzuge ich es, die SVGs direkt bei Bedarf einzubinden. Trotzdem sind Sprites in Ordnung und ziemlich beliebt.

Was, wenn Sie ein Sprite haben und sehen möchten, was darin enthalten ist?

Hier ist ein kleines Stück JavaScript, das durch alle gefundenen Symbole schleift und eine SVG injiziert, die jedes einzelne verwendet...

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>
`)
});

Sehen Sie den Pen
Wandeln Sie ein Sprite visuell in einzelne SVGs um von Chris Coyier (@chriscoyier)
auf CodePen.

Das ist alles.

Kommentare