Привет, друзья!

Поговорим о том, КАК ДОБАВИТЬ ИКОНКИ НА САЙТ ИЗ FIGMA. Для тех, кому интереснее смотреть видео, прикрепляю свой видосик на YouTube:

Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют чёрт пойми как… Могут добавить их как png изображения, а могут вообще использовать не иконки из макета, а похожие иконки, использовав, к примеру, FontAwesome. Это жестко, скажу я вам.

В связи с этим я хочу расставить все точки над i в этой теме и рассказать достаточно подробно о том, как лучше всего добавлять иконки на сайт из макета Figma.

Способов хватает, и выбор конкретного способа зависит от самого проекта и дизайнера, который делал макет. Собственно об этом всём мы и поговорим!

Способ №1 - это экспортировать иконки в svg формат и вставлять их либо как код, либо как изображение, либо как CSS свойство.

Сосбтвенно, выделяем иконку в Figma и жмём на экспорт в SVG формат, сохраняем в наш проект и вставляем на сайт:

<!-- через тег img -->
<img src="img/icons/icon-refresh.svg" alt="">

<!-- svg код -->
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M3.5 17.5V11.375H9.625L6.81012 14.1925C7.29091 14.6841 7.86482 15.0751 8.49836 15.3425C9.13189 15.6099 9.81234 15.7484 10.5 15.75C11.5843 15.7484 12.6416 15.4111 13.5265 14.7844C14.4114 14.1577 15.0805 13.2723 15.442 12.25H15.4577C15.5575 11.9656 15.6336 11.6725 15.6844 11.375H17.4449C17.2318 13.0666 16.4086 14.6222 15.1299 15.7499C13.8512 16.8777 12.2049 17.5 10.5 17.5H10.4912C9.57234 17.5028 8.66201 17.3232 7.81296 16.9717C6.96391 16.6203 6.19301 16.1039 5.54487 15.4525L3.5 17.5ZM5.31475 9.625H3.55425C3.76729 7.93404 4.58994 6.37889 5.86789 5.25123C7.14583 4.12358 8.79129 3.50091 10.4956 3.5H10.5C11.4191 3.49709 12.3296 3.67657 13.1788 4.02803C14.028 4.37949 14.799 4.89595 15.4472 5.5475L17.5 3.5V9.625H11.375L14.1942 6.8075C13.713 6.3153 13.1384 5.92402 12.504 5.65659C11.8697 5.38916 11.1884 5.25093 10.5 5.25C9.41565 5.2516 8.3584 5.58893 7.47349 6.21563C6.58859 6.84233 5.91945 7.72767 5.558 8.75H5.54225C5.44162 9.03438 5.3655 9.3275 5.31562 9.625H5.31475Z" fill="white"/>
</svg>

<!-- css -->
<span class="icon-refresh"></span>

<style>
    .icon-refresh {
        position: relative;
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url('img/icon-refresh.svg');
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

Сам по себе вариант самый очевидный, простой и достаточно хороший.

Однако тут у нас выступает 2 очень неприятные проблемы. 

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

Вторая проблема - это если мы подключаем иконку таким способом, то нам проблематично менять её цвет через CSS или даже JS. Придётся экспортировать дубль иконки, но с другим цветом. А в случае с тегом object у нас вообще не будет нормально работать ссылка, если мы обернули её в тег <a>.

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

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

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

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

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

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

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

<span class="icon icon_vk"></span>
<span class="icon icon_instagram"></span>

<style>
    .icon {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url('img/socials-pack.svg');
        background-size: 287px;
        background-repeat: no-repeat;
    }

    .icon_vk {
        /* начальная позиция стоит по-умолчанию */
    }

    .icon_instagram {
        background-position: 239px 0;
    }
</style>

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

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

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

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

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

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

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

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

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

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

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

<!-- подключем сервис (это будет ссылка либо js, либо css) -->
<script src="https://code.iconify.design/2/2.1.2/iconify.min.js"></script>

<!-- указываем иконку -->
<span class="iconify" data-icon="ci:refresh-02"></span>

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

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

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

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

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

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

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

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

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

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

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

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

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

Наш код:

<!-- подключаем иконки в <head> или в файле стилей -->
<link rel="stylesheet" href="fonts/icomoon/style.css">

<!-- иконка через html -->
<i class="icon-refresh"></i>

<!-- иконка через css -->
<button class="button">Кнопка с иконкой</button>

<style>
    .button:before {
        content: '\e90a';
        font-family: 'icomoon', sans-serif;
    }
</style>

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

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

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

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

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

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

Из минусов:

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

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

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

Заключение

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

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

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

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

Комментарии (8)


  1. DarkPreacher
    31.01.2022 13:08
    +1

    Способ №5 – простой (с оговорками).

    Подавляющее большинство из тех, кто занимается вёрсткой – используют бандлеры или таск-раннеры. Найдите плагин для своей системы сборки, который пакует все иконки из папки в один svg-спрайт и потратьте немного времени для его настройки.

    Встраивать в html можно как-то так:

    <svg><use href="путь/до/sprite.svg#social-vk" /></svg>

    + Легко менять размер и цвет.

    - Надо разобраться.


    1. Emchik
      31.01.2022 14:51

      Это относится к использованию текстур иконок. Просто через сборщики. Плюсы и минусы на самом деле те же


      1. delphinpro
        01.02.2022 09:57
        +2

        «Текстур иконок» – это всегда называлось «Спрайты»
        Данный способ называется так же — Symbols sprite. И он лишен недостатков обычного, растрового спрайта.
        1. Подключая иконку таким образом, мы можем управлять ее цветом через css.
        1.1 Играя значениями inherit и currentColor мы можем управлять двухцветными иконками.
        1.2 А если заюзать кастомные свойства, то и многоцветные иконки в нашей власти
        2. Задав иконке ширину и высоту в «em», мы сможем управлять ее размером через свойство font-size, если это необходимо.
        3. Такой спрайт может подгружаться отдельным файлом и, соответственно, закешированным браузером. А для включения в код страницы используются довольно короткие конструкции «use», которое можно еще больше сократить, используя возможности вашего шаблонизатора, или просто написав функцию на php. <?= icon('social-vk') ?>

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


        1. AvisTV Автор
          01.02.2022 11:13

          За 7 лет работы я не встречал этот вариант использования на фрилансе и в компаниях, поэтому ваш комментарий очень полезен к данному посту, спасибо????


  1. javasaur
    31.01.2022 14:52

    Хочу уточнить по поводу способа №1, сами на проекте используем и проблем не возникало.

    Если нужно менять цвет иконок извне, можно же задать свойство fill="currentColor" на всю иконку или на её пути, тогда она может принимать цвет окружающего контейнера.

    По поводу размера кода - вас смущает кол-во кода или размер бандла? На "сложные" изображения с большим кол-вом элементов можно сделать исключение и экспортнуть пнгшный вариант, но для маленьких иконок код занимает, как правило, 2-3 строчки.


    1. AvisTV Автор
      31.01.2022 15:01

      Я не говорю, что вариант плохой) Я говорю, что есть другие варианты, которые, как по мне, лучше.

      Касательного первого способа. Внутри svg может быть и path, и polygon, и circle и т.п. И бывает, что внутри них тоже бывает задан цвет с помощью fill. Из-за этого нам приходится делать что, то типа:

      .icon,
      .icon path,
      .icon circle,
      .icon polygon {
          fill: coral !important; /* и даже это не всегда срабатывает */
      }

      Тут и important постоянно придётся писать, и код какой-то костыльный сам по себе????


    1. AvisTV Автор
      31.01.2022 15:03

      В общем, иконки разные попадаются. Всё зависит от вас и проекта


  1. uyrij
    01.02.2022 14:50

    Иконки, в своем шрифте это тренд ✌️уже проверенный временем. Можно покрасить иконку на этапе создания шрифта, а можно вложить в элемент, и применить css filter opacity, saturation и другие, сделав чб, нужным монохромом и с эффектами.. ещё, есть тренд поновее - это Lottie files анимация через JSON data. Есть плагин импорта для фигма.