Лучший способ — inline-svg.
Используем какой-нибудь
gulp-svg-symbols, собираем все иконки в один большой файла, в котором будут использоваться символы.
Далее, в верстке используем конструкцию вида:
<svg>
<use xlink:href='pathToImage.svg#iconName'> </use>
</svg>
use — это способ использовать символ, который объявлен где-то еще по его ID.
Однако, способ с внешним файлов не работает в ИЕ — потому подключаем
svg4everybody.
Плюсы по сравнению с deSVG – один запрос, а не по запросу для каждой картинки; для всех браузеров, кроме ие не нужны никакие костыли — в deSVG будет же замена картинки на svg, лишние операции с домом.
Плюсы по сравнению со шрифтами — иконочные шрифты в мелком размере на low-dpi экранах отображаются весьма плохо.
Простой
