CODEWITHSUNDEEP
htmlsvgicons
zincy
zincy

Reputation: 5

svg sprite not displaying icons, only showing the first icon from the sprite.svg

I am working with svg sprite and having trouble showing the icons. Only the first icon is showing from the sprite the rest are not. Can someone please help?

I am making reference to the svg icon on the html file and referring to a sprite sheet:

<i class="icon icon-desktop-wallet">
  <svg width="145" height="145" viewBox="0 0 53 32">
    <use xlink:href="sprite.svg#icon-image-desktop-wallet"></use>
  </svg>
</i>

here is it on plunker: https://plnkr.co/edit/9uJBGIsti0okemimjcNM?p=preview

not too sure what i have missed here

thanks

Upvotes: 0

Views: 2520

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

In the sprite.svg file the x of each element changes e.g. for icon-image-bg-cloud the x value is 37.

<svg id="icon-image-bg-cloud" width="55" height="32" viewBox="0 0 55 32" x="37" y="0">
...
</svg>

This means when you display it with a viewBox="0 0 29 32" you don't see anything as the sprite is outside the viewable area.

You could fix this by either

  1. setting viewBox="37 0 29 32" for this particular sprite and then adjusting the other use values appropriately, or
  2. setting x="0" in the sprite.svg for all your sprites. In fact you could remove the x attribute altogether as 0 is the default here.

Option 2 seems easiest to me FWIW.

Upvotes: 1

Related Questions