Расскажу о наших метаниях в выборе подхода: >>>
по экономии размера, самыми эффективными будут решения через filter или mask
По вариативности расцветок — самый простой вариант — использование спрайтов.
Inline вариант с use — также хорошо экономит размер, но хуже, чем filter или mask
Поэтому, если задаетесь подобным вопросом, то решение inline svg + use — рекомендую к рассмотрению :) Его просто внедрить и недорого поддерживать.
Если слить все эти иконки в одно место, то получится каша. Это не обязательно всегда плохо.
Выглядит это так: миксину приходит набор состояний, например `.abstract-icon-kinds(default action primary secondary);`
Здесь вспоминается доклад Вадима:
У нас есть N подходов и ни одного идеального. И это просто вставить иконку на страницу.