Обзор Icons8 — гибкая библиотека иконок

Иконки — важный элемент дизайна чего угодно в целом, и для вёрстки сайтов в частности. И визуальную поддержку тексту окажут, и полностью его заменят.

Традиционная схема использования для меня выглядела так:

1. Понимаю, что нужна иконка
2. Открываю flaticon или iconfinder и ищу по их базе
3. Скачиваю понравившиеся
4. ???
5. Profit Вставляю в нужное место

Гуляя по просторам интернета, мне попался любопытный проект — icons8.com. С одной стороны может показаться, что это ещё один сервис с иконками, которых достаточно много — аж целых 52 900 штук, и всё это почти бесплатно. Почему? Бесплатно можно скачать только иконку в формате png максимальным размером 100px — вот это, пожалуй, единственный существенный минус (ибо есть куча сервисов, где примерно такие же иконки бесплатно доступны в векторе).

За 20$ в месяц ограничения по размерам снимаются и появляется возможность скачать уже форматами svg, eps, pdf (зачем? 0_о).

Однако, если прикинуть, что эти 52к иконок сделаны в одном стиле (считай, единая подборка) — то это однозначный плюс, поскольку расхождений в стилистике между иконками не будет.

Но Icons8 меня порадовал другими преимуществами — их и рассмотрим подробно.

Гибкая онлайн-библиотека

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

Использование достаточно просто: в этой мега-библиотеке находим нужную иконку и указываем ее название. Мне нашелся вот такой симпатичный кораблик, который называется sail-boat:

<img src="https://png.icons8.com/sail-boat/" alt="sail-boat" />

Это базовый пример. Но мы пойдем дальше и передадим сервису параметры цвета и размера:

<img class="aligncenter" src="https://png.icons8.com/sail-boat/color/128" alt="sail-boat" width="128" height="128" />

После основной ссылки мы указываем в HEX любой цвет, а через слэш — размер. Реализация очень крутая, весьма доставляет. И нужные параметры задаются очень просто, что даёт большой простор для творчества и фантазии. И кстати — для скачивания сервис ограничивает размер скаченного файла в 100px, однако если запросить ссылкой с сервиса — отдаёт большего размера иконки.

Кроме такого необычного фунционала, у icons8 есть ещё более интересный функционал — это подключение иконки с помощью метатегов. Выглядит это следующим образом: на вот этой странице мы выбираем понравившуюся иконку и во всплывающем оконце он нам покажет вот такого вида код:

<webicon icon="color-icons:landscape"/>

Мы его вставляем на свой сайт в нужное место. Но если мы просто так вставим и оставим — ничего не взлетит, так как браузер не понимает, что это такое вообще и как с ним работать. Нужно подключить скрипт-обработчик, причём двумя способами. Самый простой способ — с помощью jQuery:

<script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script>

Или если у Вас работает AngularJS, тогда используем следующий код:

<script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/angular-webicon.min.js"></script>

После подключения этого скрипта всё работает. Честно, я не могу себя назвать знатоком интернета, но такого функционала я не встречал.

Но и на этом разработчики решили не останавливаться и продолжили развивать возможности своего сервиса дальше.

Приложение icons8 для Windows и Apple

Приложение-каталог для Windows и MacOS (для последнего доступен и в AppStore — всё серьёзно). Интерфейс минималистичный и понятный — только фильтр стилей и поиск.

Однако самое главное — это приложение позволяет сразу перетащить иконку с помощью drag-and-drop в нужную программу: поддерживает графический пакет Adobe, Visual Studio, и работает даже в офисных программах типа Word и PowerPoint, и сервисе GoogleDocs.

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

Программа также имеет ограничения в плане использования размера и расширения экспортируемых из неё файлов — чтобы его убрать, нужно оплатить подписку и авторизоваться в приложении. Для работы в обычном (демо) режиме авторизаций не требуется.

Вот такой вот необычный и полезный сервис. Надеюсь, мой краткий обзор был для Вас полезен.