Использую gulp-svg-sprites для формирования svg спрайтов. На выходе получаю .css, который конвертируется в .scss файл со стилями спрайта и .svg спрайт соответственно. Scss в последствии компилируется в общий файл со стилями и уже в таком виде отправляется в проект. Данный .scss файл имеет следующий код:
.icon:before {
content:' ';
vertical-align:middle;
display: inline-block;
background-image: url("../svg-res/svg-sprite.svg");
background-repeat: no-repeat;
background-size: 6.4em 6.4em;
}
Т.е. ко всем элементам с классом .icon присваивается background-image: url("../svg-res/svg-sprite.svg"); и когда речь идет о едином спрайте для всего сайта проблем нет, но когда появляется необходимость создавать несколько спрайтов, то каждый последующий .scss файл со стилями спрайтов, который будут подключатся в общий файл будут также иметь в себе класс .icon и ответственно перебивать этот класс. Также существует проблема с уникальными названиями самих .scss файлов.
Из этого следует задача (task): Как на базе gulp-svg-sprites получать несколько директорий с хранящимися в них .svg файлами, а на выходе получать все те же папки но уже со сформированными в них спрайтами, папку scss-sprite со стилями имеющими уникальные названия (желательно названия брать по названию директории в которой хроняться элементы формирующие спрайт) и менять в самих стилях .icon на уникальный для каждого спрайта?
Пока у меня все это автоматизировать не получилось. Если кто то сталкивался с подобной задачей поделитесь, пожалуйста, своими идеями.
