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

  Рет қаралды 3,132

HolyJS

HolyJS

2 ай бұрын

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

Пікірлер: 11
@user-zh5kg2op4h
@user-zh5kg2op4h 2 ай бұрын
Зачем инлайнить в base64? Уже давно можно SVG (практически нет причин не использовать оптимизированный SVG) можно инлайнить текстом: url("data:image/svg+xml,…"). Единственный символ, который надо экранировать - решётку '#' в '%23'.
@ArthurMudrick
@ArthurMudrick 2 ай бұрын
Зачем вообще инлайнить? Это же увеличит размер цсс или яваскрипта, куда будет заинлайнена иконка.
@user-zh5kg2op4h
@user-zh5kg2op4h 2 ай бұрын
@@ArthurMudrick За тем, что это лучше чем вставлять через какой-нибудь SVGR или костыли, увеличивая время рендеринга и ухудшая метрики сайта.
@zyurkalov2779
@zyurkalov2779 2 ай бұрын
Забавно, что именно под этим видео у меня сломались иконки лайка :)
@iGotton
@iGotton 2 ай бұрын
+
@fiatluxinregnonoctis
@fiatluxinregnonoctis 2 ай бұрын
Посмотрите подход к работе с иконками в Сберздоровье. Жить станет проще
@seminioni
@seminioni 2 ай бұрын
где? ссыль скинь
@imvitalya
@imvitalya 2 ай бұрын
@@seminioni +++
@ArthurMudrick
@ArthurMudrick 2 ай бұрын
зашёл на сайт - ну да, тоже идеальный вариант - просто загружать иконки как обычные файлы, элементарно ведь.
@DarkzarichV2
@DarkzarichV2 18 күн бұрын
@@ArthurMudrick Там чуть сложнее, если говорить про всю картину: грузят иконку с чёрным аутлайном и используют его как маску для окрашенного в цвет прямоугольника
Stupid Barry Find Mellstroy in Escape From Prison Challenge
00:29
Garri Creative
Рет қаралды 18 МЛН
⬅️🤔➡️
00:31
Celine Dept
Рет қаралды 37 МЛН
How to bring sweets anywhere 😋🍰🍫
00:32
TooTool
Рет қаралды 54 МЛН
ОВР Шоу: Семейные игры @ovrshow_tnt
9:08
ОВР Шоу
Рет қаралды 219 М.
HOW DO THEY DO IT?! | Basic Programs For Architects
19:59
AnCooper
Рет қаралды 38 М.
Лучший лайфхак от Миракла 😄
0:31
Miracle
Рет қаралды 10 МЛН
Забота от брата 😂 #shorts
0:31
Julia Fun
Рет қаралды 1,1 МЛН
Невидимая месть
0:48
Brusko
Рет қаралды 3,5 МЛН
ЛЕДИ БАГ УКУСИЛ ЗОМБИ😱 #shorts
0:22
BestStories
Рет қаралды 1,7 МЛН
Can teeth really be exchanged for gifts#joker #shorts
0:45
Untitled Joker
Рет қаралды 4,4 МЛН
Sion princess funny Donut Challenge
0:38
SION /紫音
Рет қаралды 10 МЛН