Thread by @jsunderhood

В опросе про иконки с большим отрывом лидирует вариант использовать inline иконки (с use тегом или без).
Расскажу о наших метаниях в выборе подхода: >>>

Если сейчас попытаться оценить решение, то
по экономии размера, самыми эффективными будут решения через filter или mask
По вариативности расцветок — самый простой вариант — использование спрайтов.
Inline вариант с use — также хорошо экономит размер, но хуже, чем filter или mask

Правильный выбор между этими решениями сделать сложно. Субъективно меня очень тянет к решениям с inline + use, filter или mask. Последние два варианта отпадают потому что IE11 и Android 4.4.

Если вы не поддерживаете эти браузеры — рекомендую посмотреть в сторону filter или mask для иконок. Делается очень просто и они лучше всего экономят память.

Выбираем из оставшегося.

Если рассматривать вариант просто inline без use. На моменте, когда вспоминается, что кроме React у тебя есть еще mustache и xslt и для этих двух шаблонизаторов нужно писать свои обертки или precompiled template понимаешь, что это будет очень высокий оверинжиниринг.

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

Пробуем вариант с inline svg + use. Само решение простое: мы инлайним + используем use при первой вставке иконки на страницу, а при повторном используем только use. Как писал выше, для нас основная проблема была с пересечением id для иконок.

Окей, это решается именем иконки — нам же все равно компонент вызывать с уникальным именем. А чтобы названия не пересекались, можем класть иконки в одну папку.

Такое решение очень хорошо зайдет, особенно, если у вас single source of icons 😀.

Поэтому, если задаетесь подобным вопросом, то решение inline svg + use — рекомендую к рассмотрению :) Его просто внедрить и недорого поддерживать.

Но на большом сайте можно столкнуться с тем, что самих иконок большое количество. Есть иконки UIToolkit, иконки относящиеся к определенному сайту, специфические для определенных мест.
Если слить все эти иконки в одно место, то получится каша. Это не обязательно всегда плохо.

В итоге, получаем, что у нас есть потенциальное место для коллизий и если не сводить все иконки в одно место при этом подходе — риск увеличивается.

Остается вариант со спрайтами. Он дает чуть больший размер бандла по сравнению с inline + use и добавляет сложностей в анимации переходов (но потенциально они все равно возможны). В остальном есть и плюсы — цветные иконки делаются сильно проще, чем в других вариантах

Возможные состояния у нас генерируются на less.
Выглядит это так: миксину приходит набор состояний, например `.abstract-icon-kinds(default action primary secondary);`

Затем через рекурсию создаются модификаторы: `icon_action, icon_primary icon_secondary` и модификаторы для hover, focus по типу `icon_highlighted-action`

Специфические иконки для сайтов генерируются по аналогичному механизму. UIToolkit предоставляет миксин, который сгенерирует нужные классы.

Здесь вспоминается доклад Вадима:

Мораль этой истории?
У нас есть N подходов и ни одного идеального. И это просто вставить иконку на страницу.

Справедливости ради сказать, если у вас нет поддержки ie11 и прочего, то inline + use, filters или mask вам хорошо подойдут