Добрый что-то там!
Подскажите, что за штука формирует подобный svg-sprite:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<view id="check" viewBox="0 0 20 20"/>
<view id="date-1" viewBox="0 20 64 64"/>
<view id="date-2" viewBox="0 84 64 64"/>
<view id="pen-a" viewBox="0 148 64 64"/>
<view id="pen-b" viewBox="0 212 64 64"/>
<use xlink:href="#s-check" x="0" y="0"/>
<use xlink:href="#s-date-1" x="0" y="20"/>
<use xlink:href="#s-date-2" x="0" y="84"/>
<use xlink:href="#s-pen-a" x="0" y="148"/>
<use xlink:href="#s-pen-b" x="0" y="212"/>
<symbol id="s-check"><path d="M5 11l3 3 7-7" fill="none" stroke="#222" stroke-width="2px" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd"/></symbol>
<symbol id="s-date-1" fill="#ddd" fill-rule="evenodd"><path d="M50 50H14a4 4 0 0 1-4-4V20a4 4 0 0 1 4-4h2v-2a4 4 0 0 1 8 0v2h4v-2a4 4 0 0 1 8 0v2h4v-2a4 4 0 0 1 8 0v2h2a4 4 0 0 1 4 4v26a4 4 0 0 1-4 4zM34.2 22.3h-.5l-7.7 3v2.4l5.4-2v18h2.8V22.3z"/></symbol>
<symbol id="s-date-2" fill="#ddd" fill-rule="evenodd"><path d="M50 50H14a4 4 0 0 1-4-4V20a4 4 0 0 1 4-4h2v-2a4 4 0 0 1 8 0v2h4v-2a4 4 0 0 1 8 0v2h4v-2a4 4 0 0 1 8 0v2h2a4 4 0 0 1 4 4v26a4 4 0 0 1-4 4zm-10.8-8.5H28.5l5.7-6.2 1.6-1.8a15.5 15.5 0 0 0 1.3-2 10.8 10.8 0 0 0 1-1.8 6 6 0 0 0 .5-2 6 6 0 0 0-.4-2.2 5 5 0 0 0-1.3-1.8 5.7 5.7 0 0 0-2-1.2A8.3 8.3 0 0 0 32 22a8 8 0 0 0-3 .7 6.3 6.3 0 0 0-2.3 1.4 6 6 0 0 0-1.3 2 7.3 7.3 0 0 0-.4 3h2.6a5.6 5.6 0 0 1 .4-2 3.7 3.7 0 0 1 .7-1.4 3.6 3.6 0 0 1 1.3-1 5 5 0 0 1 1.8-.2 4 4 0 0 1 1.6.3 3.4 3.4 0 0 1 1 .8 3.5 3.5 0 0 1 1 1.2 4.4 4.4 0 0 1 0 1.5 5 5 0 0 1 0 1.5 5.4 5.4 0 0 1-.6 1.3 11.5 11.5 0 0 1-1 1.5q-.6 1-1.6 2l-7 7.8v2h14V42z"/></symbol>
<symbol id="s-pen-a" fill="#ddd" fill-rule="evenodd"><path d="M32 60S12 40 12 24a20 20 0 0 1 40 0c0 16-20 36-20 36zm1.2-46.4h-2.4L22.6 35h3l2-5.6h9l2 5.6h2.8zM32 17l3.6 10h-7.2z"/></symbol>
<symbol id="s-pen-b" fill="#ddd" fill-rule="evenodd"><path d="M32 60S12 40 12 24a20 20 0 0 1 40 0c0 16-20 36-20 36zm7.4-33a5 5 0 0 0-.7-1.4 4.8 4.8 0 0 0-1.2-1 5.2 5.2 0 0 0-1.6-1 5.5 5.5 0 0 0 2-1.6 4.3 4.3 0 0 0 1-2.7 6.3 6.3 0 0 0-.7-2.5A4.5 4.5 0 0 0 37 15a6 6 0 0 0-2.2-1 12 12 0 0 0-3-.4h-7V35h7.6a10 10 0 0 0 3-.4 6 6 0 0 0 2-1.2 5.3 5.3 0 0 0 1.5-2 6.5 6.5 0 0 0 .5-2.6 6 6 0 0 0-.3-1.7zm-3.7 4.6a3.8 3.8 0 0 1-1.3.8 5.5 5.5 0 0 1-1.8.3H28V25h4.7a5.6 5.6 0 0 1 2 .3 3.4 3.4 0 0 1 1.2.7 3 3 0 0 1 .4 1.2 5 5 0 0 1 .2 1.6 4.2 4.2 0 0 1-.3 1.6 3.2 3.2 0 0 1-.8 1.2zm-.6-9.8a3.8 3.8 0 0 1-1 .7 5.5 5.5 0 0 1-1.6.2H28V16h4a5 5 0 0 1 3.2.8 3 3 0 0 1 1 2.5 3.4 3.4 0 0 1-.2 1.5 3 3 0 0 1-1 1z"/></symbol>
</svg>
При этом к желаемому элементу можно обратиться как из html:
<img src="assets/img/svg/sprite-accessory.svg#door", alt="">
, так и через css:
background-image: url("../img/svg/icons.svg#check")
Простой
