FrontendConf

Страница участника

назад

Зал «Альфа»

Принят

Фото докладчика

Никита Мостовой

HeadHunter

Frontend

Мнение ПК

В нашей индустрии не так часто вспоминают про такие мелкие бытовые вещи, как svg-иконки. Никита Мостовой попробует решить проблему в ёмком how-to-докладе, где ничто не останется недосказанным.

  • # Шаблонизаторы и препроцессоры

  • # JavaScript

Icon. Оверинжиниринг или необходимость?

Тезисы

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

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

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

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

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

Презентации и видео

Никита Мостовой

HeadHunter

Ведущий фронтенд-разработчик в команде архитектуры в HeadHunter.

Телеграм — xnimorz
Twitter — https://twitter.com/xnimorz

Подписка на новости

Хотите быть в курсе? Для получения анонсов о новых конференциях, полезных материалах и вдохновения — подписывайтесь на нас!

Нажимая на кнопку «Подписаться», вы соглашаетесь с Политикой обработки персональных данных

Другие доклады секции