En Snutt för att Se alla SVGs i en Sprite

0
8

Jag tänker på en SVG-sprite som denna:

<svg-display=”none”>
<symbol id=”ikonen-ett” – > … <symbol>
<symbol id=”ikonen-två”> … <symbol>
<symbol id=”ikonen-tre”> … <symbol>
</svg>

Jag var länge ett fan av strategi för ikonen system (<använda>-ing dem som behövs), men jag föredrar inklusive SVGs direkt som behövs i dessa dagar. Fortfarande sprites är fint och ganska populärt.

Vad händer om du har en sprite, och du vill se vad som finns i det?

Här är en liten bit av JavaScript som kommer att gå igenom alla de symboler som den hittar och injicera en SVG som använder var och en…

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

symboler.forEach(symbol => {
dokumentet.organ.insertAdjacentHTML(“beforeend”, `
<svg width=”50″ height=”50″>
<använd xlink:href=”#${symbol.id}” />
<svg>
`)
});

Se Pennan
Visuellt sin tur en sprite i enskilda SVGs av Chris Coyier (@chriscoyier)
på CodePen.

Det är allt.