Совсем недавно отвечал на вопросы
про генерацию нескольких спрайтов:
Способы генерации нескольких спрайтов?
и про подход к хранению графики вообще:
Шрифты или картинки для иконок что оптимальнее?
Послушайте как делают в 2гис:
2014.codefest.ru/lecture/677 (правда сейчас судя по всему от ase64 отказываются)
По вашим вопросам:
1. К сожалению, используя спрайт мы жестко привязаны к размерам иконки. Т.е. если у нас одинаковая иконка 16*16 и 32*32 - придется добавить в спрайт обе. Если у нас серая по умолчанию и синяя по ховеру - придется добавить обе.
Решают эту проблему шрифты (но со своими, на мой взгляд критичными, недостатками) и svg symbols (тоже есть минусы, внедрять планирую начинать в следующем году).
2. Да,
https://github.com/jkphl/gulp-svg-sprite - всё положительно, мощная штука. Конечно нужно будет заморочиться со своим шаблоном файла стилей, чтобы всё по красоте.
Подводный камень есть со спрайтами вообще. Когда сделаете - попробуйте подвигать масштаб страницы. Иконки на некоторых уровнях"подрежутся". Погуглите про эту проблему.
3. Ответ в первом абзаце
4. Использую
https://www.npmjs.com/package/gulp-imagemin для пожатия всей графики, включая svg
Простой
