Et Utdrag for å Se alle SVGs i en Sprite

0
7

Jeg tenker på en SVG sprite som dette:

<svg-display=”none”>
<symbol id=”icon-ett”> … <symbol>
<symbol id=”icon-to”> … <symbol>
<symbol id=”icon-tre”> … <symbol>
</svg>

Jeg var lenge en tilhenger av at tilnærmingen for ikon systemer (<bruk>-ing dem som trengte), men jeg foretrekker inkludert SVGs direkte som trengs i disse dager. Likevel, sprites er fine, og ganske populære.

Hva hvis du har en sprite, og du vil se hva som er i det?

Her er en liten bit av JavaScript som vil bla gjennom alle symboler det finner og injisere en SVG som bruker hver og en…

const sprite = – dokument.querySelector(“#sprite”);
const symboler = sprite.querySelectorAll(“symbol”);

symboler.forEach(symbol => {
dokumentet.kroppen.insertAdjacentHTML(“beforeend”, `
<svg width=”50″ høyde=”50″>
<bruk xlink:href=”#${symbolet.id}” />
<svg>
`)
});

Se Penn
Visuelt slå en sprite i individuelle SVGs av Chris Coyier (@chriscoyier)
på CodePen.

Det er alt.