4 способа добавить иконки на сайт из Figma — все плюсы и минусы / Хабр | Веб-студия Nat.od.ua

Есть также ещё небольшой минус — он связан с тем, что мы не можем задать размер иконки через свойство font-size (то есть мы не наследуем размер шрифта). Приходится всё время «играться» с шириной и высотой.

Из плюсов, пожалуй, только то, что вариант простой и экономит немного времени в небольших проектах.

Поэтому этот вариант на самом деле подходит тогда, когда иконок в макете не много (то есть максимум штук 3-5) и их цвета нигде не меняются (к примеру по наведению или теме макета).

Способ №2 — это создать 1 файл со всеми иконками. По-другому это называют текстура иконок.

Вариант также подразумевает экспорт иконок в svg или png формат, но одним файлом, где будут все иконки одного размера. Это довольно старый вариант, но знать о нём нужно. Я точно знаю, что ВКонтакте использовали этот способ очень долго, и после редизайна они отказались от этого способа в пользу SVG + JS.

К примеру, иконки соц. сетей:

Прописываем код для иконки ВК и Instagram:

Тут у нас выступает 2 проблемы:

Первая — у нас может занять много времени подготовка CSS свойств.

Вторая — опять очень проблематично менять цвета. Придётся экспортировать столько дублей иконок, сколько нужно цветов.

Зато тут есть 1 приятный плюс — это небольшой HTML код, так как мы используем только класс, чтобы добавить иконку.

Сам вариант нужно использовать с осторожностью и только по особенности проекта (к примеру, если мы хотим сделать плагин со смайликами для чата). В других же ситуациях нужно использовать другие варианты.

Способ №3 — использовать готовый сервис иконок. Тут вам важно уточнить у дизайнера — ОТКУДА ВЗЯТЫ ИКОНКИ.

Небольшое отступление — вам в принципе нужно всегда спрашивать у дизайнера: какие иконки, откуда изображения, где взять шрифт и т.п. вопросы.

Часто бывает такое, что иконки взяты с какого-то сервиса, который позволяет подключить иконки через стили или скрипты.

В Figma дизайнеры часто используют сервис Iconify.

Либо дизайнер мог использовать другие иконки, где есть готовое подключение на сайт. Тот же EvaIcons, к примеру.

Пример подключения через Iconify:

Тут я уже начну с плюсов:

• во-первых, мы можем очень легко и быстро подключить все иконки на сайт

• во-вторых, цвет иконки меняется очень просто по свойству color в css

• в-третьих, размер иконки наследуется от шрифта и мы можем его менять по свойству font-size

• да и в целом в нашем html коде всё аккуратно, иконки занимают 1 строку

Из минусов, пожалуй, только то, что мы подключаем сторонний сервис/библиотеку, и вместе с этим много лишнего кода. Но это мелочь, особенно если дедлайн проекта горит.

Этот вариант следует использовать, если иконок в макете больше 5 и их цвета не нигде не меняются.

Способ №4 — это самостоятельно превратить все иконки в иконочный шрифт

В этом случае вам не повезло, потому что дизайнер использовал иконки, для которых нет никакого решения для подключения на сайт (вот подлец?).

Что мы делаем:

• мы экспортируем все иконки в svg формат (будет лучше, если все они будут чёрные, латиницой без символов и слова «icon»)

• импортируем их в сервис icomoon (чтобы сэкономить кучу времени). Тут важно, чтобы у вас все иконки были в кривых (fill), а не обводкой (stroke). Сервис не работает с обводкой, и он вас предупредит, если какая-то иконка будет сделана обводкой

• генерируем иконочный шрифт и получаем готовый CSS файл и превьюшку с иконками

Наш код:

Кнопка с иконкой

Из плюсов я выделю:

• возможность легко менять цвет через CSS свойтсво color

• возможность задавать размер иконки через font-size (то есть иконка наследует размеры щрифта)

• небольшой html-код, так как мы используем только 1 небольшой класс для добавления иконки

• простая поддержка иконок (легко добавлять и удалять иконки из нашего арсенала)

• экономим пространство тем, что у нас находятся только те иконки и код, которые нужны (в отличии от использования готового решения, где может быть больше сотни иконок)

Из минусов:

• мы тратим немного больше времени на подготовку иконочного шрифта

• нам важно следить, чтобы иконки были в кривых, а не обводочными

Данный вариант подходит, когда иконок в макете много и когда их цвета могут меняться.

Заключение

Друзья! Поверьте, этого всего вам достаточно, чтобы научиться правильно и без проблем подключать любые иконки на любой сайт. Ведь сами понимаете, как важно, чтобы html-макет соответствовал макету в Figma, при это без ущерба производительности и качеству кода.

Пишите в комментариях — что вы думаете по этому поводу.

Не забывайте подписываться на меня в YouTube, там также много полезного.

Удачи вам в ваших макетах и увидимся в следующих видео/статьях. Пока!