Игорь Федоров, VK / ВКонтакте - Зоопарк иконок: упрощаем работу с иконками для дизайна и разработки

Ближайшая конференция - HolyJS 2024 Autumn, 6 ноября (Online), 12-13 ноября, Санкт-Петербург
- -
Игорь поделился опытом организации работы с иконками для фронтенда ВКонтакте. У них много дизайнеров и разработчиков и куча репозиториев с проектами. В каждом проекте нужны иконки - и хочется организовать все с максимальным удобством для дизайна и разработки.
Спикер рассказал о первоначальных проблемах, с которыми они столкнулись при работе с иконками: десятки дублей, сложности с обновлением и каталогизацией. Он рассмотрел, как вообще можно использовать иконки на фронтенде. Он также показал решение, которое в итоге сформировалось и подошло для их размаха технологий: они используют иконки как в React и JavaScript, так и в легаси PHP-бэкенде.
Технологии: SVG, SVGR, React, TypeScript, PHP.
Доклад будет интересен фронтенд-разработчикам и дизайнерам любого уровня.

[@user-zh5kg2op4h]

Зачем инлайнить в base64? Уже давно можно SVG (практически нет причин не использовать оптимизированный SVG) можно инлайнить текстом:
url("data:image/svg+xml,…"). Единственный символ, который надо экранировать - решётку '#' в '%23'.

[@ArthurMudrick]

Зачем вообще инлайнить? Это же увеличит размер цсс или яваскрипта, куда будет заинлайнена иконка.

[@user-zh5kg2op4h]

@@ArthurMudrick За тем, что это лучше чем вставлять через какой-нибудь SVGR или костыли, увеличивая время рендеринга и ухудшая метрики сайта.

[@iGotton]

+

[@zyurkalov2779]

Забавно, что именно под этим видео у меня сломались иконки лайка :)

[@fiatluxinregnonoctis]

Посмотрите подход к работе с иконками в Сберздоровье. Жить станет проще

[@seminioni]

где? ссыль скинь

[@imvitalya]

@@seminioni +++

[@ArthurMudrick]

зашёл на сайт - ну да, тоже идеальный вариант - просто загружать иконки как обычные файлы, элементарно ведь.