Добавить svg-иконку на сайт просто. Это можно сделать в виде отдельного ресурса в спрайте. Можно заинлайнить в виде компонента. Можно воспользоваться css-masks или filter.

Спустя некоторое время к нам приходит дизайнер и просит использовать другой размер или цвет в определенном месте. Мы добавляем какую-то логику, усложняем текущее решение и, возможно, приходим к инлайн-варианту.

Этот способ очень удобен, и в современном вебе я встречал его на каждом третьем сайте на React. Главная проблема такого варианта: при SSR иконка не кэшируется, и мы каждый раз гоняем от сервера к пользователю набор иконок на странице.

Мы сталкиваемся с задачей поддержки вариабельности иконок и их перфоманса.

В этом докладе мы разберем разные способы создания и оптимизации иконок. Окунемся в оверинжиниринг и попробуем ответить на вопрос: только ли ситхи возводят все в абсолют?