Ein Snippet, um zu Sehen, alle SVGs in ein Sprite

0
10

Ich denke, einer SVG-Sprites wie diesem:

<svg display=”none”>
<symbol id=”icon-eins”> … <symbol>
<symbol id=”icon-zwei”> … <symbol>
<symbol id=”icon-drei”> … <symbol>
</svg>

Ich war lange ein fan des Ansatzes für Symbol-Systeme (<use>-ing Sie, wie gebraucht), aber ich bevorzuge, einschließlich der SVGs direkt als nötig in diesen Tagen. Noch die sprites sind gut, und ziemlich beliebt.

Was, wenn Sie ein sprite, und Sie will sehen, was ‘ s in it?

Hier ist ein klein wenig JavaScript-Code wird in einer Schleife durch alle Symbole, die es findet, und injizieren eine SVG, die verwendet jeden…

const sprite = document.querySelector (“#”sprite”);
const Symbole = sprite.querySelectorAll(“symbol”);

Symbole.forEach(symbol => {
Dokument.Körper.insertAdjacentHTML(“beforeend”, `
<svg width=”50″ height=”50″>
<use xlink:href=”#${symbol.id}” />
<svg>
`)
});

Siehe Stift
Optisch wiederum ein sprite in einzelne SVGs von Chris Coyier (@chriscoyier)
auf CodePen.

Das ist alles.