svg sprite не отображает значки, только показывая первый значок из sprite.svg

Question

Я работаю с svg спрайтом и не могу найти иконки. Только первый значок отображается из спрайта, остальные - нет. Кто-то может помочь?

творю ссылку на иконку SVG на HTML файл, и со ссылкой на спрайт лист:

<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> 

вот это на plunker: https://plnkr.co/edit/9uJBGIsti0okemimjcNM?p=preview

не слишком уверен, что я пропустил здесь

спасибо

Answer 1

В файле sprite.svg изменяется x каждого элемента, например для иконок-изображения-BG-облака х значения 37.

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

Это означает, что при отображении его с Viewbox = «0 0 29 32» вы ничего не видите, как спрайт находится за пределами видимого площадь.

Вы можете исправить это либо

1. заходящего Viewbox = «37 0 29 32» для этого конкретного шприца, а затем регулировать другие значения использования надлежащим образом, или
2. параметра х = «0» в sprite.svg для всех ваших спрайтов. Фактически вы можете полностью удалить атрибут x, так как здесь используется значение по умолчанию.

Вариант 2 кажется мне самым легким FWIW.