Можно ли улучшить мой способ работы с SVG-пиктограммами?

Question

[romaro]

Речь прежде всего о пиктограммах, которые должны реагировать на события вроде клика мышкой. Сейчас все они подключаются как фоновое изображение:

background: center no-repeat url(../assets/svg/cross/cross-base.svg);

Соответственно, для каждой пиктограммы есть отдельная папка с нужными вариантами стилизации:

assets/svg/cross/
  cross-base.svg
  cross-hover.svg
  cross-active.svg
  cross-disabled.svg

Конечно, хотелось бы ограничиться одним файлом для каждой пиктограммы и управлять свойством fill из CSS. Однако единственный способ, который я вижу, это прописывать путь до иконок в HTML-шаблоне и делать инжект при помощи того же вебпака. То есть выносить управление подключением из CSS в HTML.

Но вдруг существует более изящное решение, которое позволит оставить настройку в CSS, т.к. мне кажется, что это больше относится к стилям, чем к HTML-разметке? Может быть какой-то плагин сборщика, который инжектит SVG внутрь тега, для которого прописан background?
Или смотреть в сторону спрайтов?

Comments

[Антон Литвиненко]

Спрайтов. Внешний спрайт файл, использование через use

[Ankhena]

Иконки одноцветные или нет?

Для одноцветных есть фильтры и маски.

Для многоцветных спрайт уменьшит количество запросов.
Либо инлайн в разметку.

Answer 1

[Алексей Скляров]

Какие варианты знаю я:
1. Использовать спрайты
2. Вставлять инлайн иконку и работать с ее кривыми, фигурами посредством CSS (так же как и с любыми другими сущностями)
3. При помощи php отдавать все <img src="image.svg"> как inline.
4. Делать пункт 3 при помощи js.