Для начала надо понять что такое SVG спрайт
Это обычный svg документ .. со списком иконок и со стилем : display:none; который вставлен в любое место в html документе и имеет список нужных иконок или же верно сказать path и всё далее как сказал
SmthTo в html документе мы делаем мягкую ссылку и вставляем куда требуется.
Что бы иконка везде отображалась одинаково и была одинаковых размером то как правило их рисуют
большого размера 1000px x 1000px и центре находится экспозиция т.е сама иконка
После всех манипуляций берём полностью
<path id="" d="" /> и сохраняем столбиком в html например в самом верху страницы что обычно и делают сборщики и примерно так это выглядит :
<svg width="" height="" viewbox="" style="display:none;">
<symbol id="ico1" viewbox="0 0 1000 1000"> <path d="M..............z" /></symbol>
<symbol id="ico2" viewbox="0 0 1000 1000"> <path d="M..............z" /></symbol>
<symbol id="ico3" viewbox="0 0 1000 1000"> <path d="M..............z" /></symbol>
<symbol id="ico4" viewbox="0 0 1000 1000"> <path d="M..............z" /></symbol>
</svg>
В html мы ссылкаем на любой path точно как сказано выше т.е таким образом :
<svg>
<use xlink:href='#ico1' />
</svg>
Если без кучи слов то вот так :
