Практическое руководство по иконкам в веб-проектах — Часть 1

[tolikchebotarev85]

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

[m_ig]

да, я частенько использую этот вариант в проектах.
Единственный большой минус - что не поддерживаются иконки с несколькими цветами, только монохромные. Для остальных случаев я использую обычно svg-спрайты.

[AnthonyDS]

Чем собираете svg-спрайты?

[m_ig]

https://www.npmjs.com/package/svg2sprite
я в подробностях опишу процесс в следующей статье

[shsv382]

Я использую похожий подход, но с использованием CSS-масок. Сами SVG-иконки лежат также в /assets/svg, есть общий scss- файл, в котором лежат шаблоны стилей (всего около 20 строк SCSS, даже меньше), добавление иконок легко делается внесением имени нового SVG-файла в SCSS-массив

[m_ig]

Отличный вариант.
Единственное, если я правильно понял, то грузятся все иконки по отдельности? Т.е. количество запросов к серверу будет равно количеству используемых иконок.

[shsv382]

Да, но при этом они не грузятся все разом.

P. S. Спасиьо за идею, пожалуй, стоит сделать отдельную статью на эту тему🤝