Een Fragment te Zien van alle SVGs in een Sprite

0
8

Ik denk dat van een SVG-sprite als dit:

<svg-display=”none”>
<symbool id=”icon-one”> … <teken>
<symbool id=”icon-twee”> … <teken>
<symbool id=”icon-drie”> … <teken>
</svg>

Ik was lang een fan van die aanpak voor het pictogram systemen (<gebruik>-ing ze als dat nodig is), maar ik ben met inbegrip van de SVGs direct als nodig is in deze dagen. Nog steeds sprites zijn prima, en zeer populair.

Wat als je een sprite, en wilt u zien wat levert het op?

Hier is een klein stukje JavaScript dat zal het doorlopen van alle symbolen die het vindt en het injecteren van een SVG-die gebruik maakt van ieder…

const sprite = document.querySelector(“#sprite”);
const symbolen = sprite.querySelectorAll(“symbool”);

symbolen.forEach(symbool’ = > {
document.lichaam.insertAdjacentHTML(“beforeend”, `
<svg width=”50″ height=”50″>
<gebruik van xlink:href=”#${symbool.id}” />
<svg>
`)
});

Zie de Pen
Visueel beurt een sprite in individuele SVGs door Chris Coyier (@chriscoyier)
op CodePen.

Dat is alles.