Внедряю в проект вот эту штуку
https://github.com/Ensighten/grunt-spritesmith
Сам генератор довольно простой и уже делает спрайт на отлично, но CSS, который получаем на выходе, можно оптимизировать, уменьшив его примерно на четверть.
Вот так вывод выглядит по умолчанию:
.icon-audio-mid {
background-image: url(build/sprite.png);
background-position: -32px -128px;
width: 32px;
height: 32px;
}
Хочу реализовать следующий вариант вывода:
.icon {
background-image: url(build/sprite.png);
}
.icon-audio-mid {
background-position: -32px -128px;
width: 32px;
height: 32px;
}
.icon-video-mid {
background-position: -32px -128px;
width: 32px;
height: 32px;
}
И присваивать тегу с иконкой два класса - icon и класс конкретно взятой иконки. Но не могу победить шаблонизатор плагина, либо выводится как по умолчанию, либо нет имён классов.
Если есть какая-нибудь документация, более подробная, чем на гитхабе, буду благодарен.