DDMLIcons. Иконсет на material-иконках от Google

Доброго здравия всем хабровчанам!

Как я уже упоминал в одном из комментариев, у меня есть свой фреймворк — XBWeb. Хотя сам по себе он и далёк от совершенства. Но на основе наработок, лежащих в его основе, я сейчас разрабатываю полноценный CMF. В процессе разработки оного передо мной встала задача проработки интерфейса админки, и в частности иконочного шрифта. Результатом решения этой задачи стала иконочная библиотека DDMLIcons (double dingbat multi‑layer icons), позволяющая в одном элементе получить двухцветную (а при нескольких слоях и многоцветную) иконку путём компоновки иконок… Так, ладно, давайте обо всём по порядку.

В целом задача по компоновке иконочного шрифта в наше время без особого труда решается при помощи сервиса Fontello. На нём есть несколько иконочных шрифтов, из иконок которых можно без труда скомпоновать свой набор иконок, назначить им коды и имена в CSS. Однако, есть две проблемы. Во‑первых, не всегда можно решить задачу иконками из одного набора. А иконки из разных наборов далеко не всегда сочетаются друг с другом. Во‑вторых, в целом начертания иконок по нынешним временам выглядят уже аляповато. Нынче в тренде Flat design, material design и прочее плоское, простое и лаконичное.

И первая и вторая проблема решается благодаря двум вещам. Во‑первых, Fontello поддерживает загрузку произвольных иконок и даже целых шрифтов в формате SVG. Во‑вторых, у Google есть чудеснейший проект под названием «Material Icons and Symbols«. Там более 2500 иконок, каждую из которых можно скачать либо в формате PNG, либо в формате SVG. Притом можно настроить некоторые параметры, как толщину и заполнение. В общем итоговое решение проблемы сводится к тому, чтобы накачать иконок, скормить их Fontello и получить готовый шрифт. Главное — это понимание, что именно нужно, и гора терпения.

Моя задача заключалась в разработке максимально универсального набора иконок, который мог бы использоваться любым модулем. А ещё требовалось, чтобы у каждой сущности были модификаторы (плюсик для добавления, корзина для удаления и т. д.). Вот на этом‑то месте я и обнаружил, что у Google с этим, скажем так, не очень. Даже если и попадаются сущности с модификаторами, то их мало, и модификаторов далеко не всегда хватает. Тут‑то я и вспомнил про одну свою старую и почти забытую идею — комбинировать одну иконку из нескольких. Грубо говоря, в простом случае идея состоит в том, чтобы поверх основной иконки накладывать нужный модификатор. В этом случае нам достаточно скомпоновать в одном шрифте базовые сущности, дингбаты‑модификаторы (далее по тексту просто дингбаты), ну и стрелочки там всякие.

Ещё одной проблемой было то, что стрелочек каждого вида по идее восемь штук — восемь разных направлений. Здесь задача решается путём изменения ориентации иконки через свойство transform. Кроме того, нужно конечно же прописать анимацию для, например, дингбата refresh. И последний момент — «неактивные» иконки (disabled). Это когда сущность, например, недоступна для использования. Здесь решение довольно простое: удаляем из дингбата content (если дингбат есть), превращаем его в вертикальную черту и разворачиваем на 45 градусов назад. Таким образом получается перечёркивание иконки. Не забываем изменить цвет иконки и рамок дингбата на светло‑серый, например.

Так же, как и в большинстве популярных иконочных шрифтов для основной иконки я использую псевдоэлемент :before. Для вывода дингбата-модификатора я использую псевдоэлемент :after. Во всех случаях используется абсолютное позиционирование псевдоэлементов. Вообще расчёт идёт на то, чтобы HTML-элемент с иконками использовался отдельно от какого-либо текста. Собственно, практика привычная для тех, кто использует в разработке, например, Bootstrap. Начертание двух-вариантных иконок (простой и заполненный) управляется свойством font-weight. Заполненный вариант отображается при значении bold.

В настоящий момент в наборе присутствуют 363 двух-вариантные иконки и 256 простых иконок. Все иконки можно просмотреть при помощи простого просмотрщика, входящего в состав пакета. Там же есть визуальный конструктор, позволяющий посмотреть, как будут выглядеть комбинации иконок между собой. Поддерживаются следующие свойства: цвет, заполненность, анимация, ориентация. Для основной иконки само собой есть переключатель на состояние «disabled». Дизайн блока простейший, но понятный. Выводится три варианта размера иконок — 80 пикселей, 56 пикселей и 32 пикселя. Под блоками кнопок текстом выводятся классы, которые необходимо присвоить HTML-элементу, чтобы отобразить иконку.

Просмотрщик поставляется в виде PHP-файла. Но если Вам нужно, чтобы иконки можно было просмотреть без запуска сервера, Вы можете:

1. Перейти в папку пакета.

2. Выполнить команду «php index.php compile».

3. Использовать получившийся файл index.html.

Файл «index.php» является не только просмотрщиком, но и компилятором. Поддерживает следующие команды:

1. compile — компиляция стилей (см. ниже) и файла index.html

2. compile/css — компиляция стилей; итоговый файл собирается из файла «min-style.css», результатов обработки файлов «font.json» каждого шрифта (классы, определяющие символ для каждой иконки), содержимого файла «src/ui.css» (если оно не пустое), содержимого файла «src/macros.css» (если оно не пустое), содержимого файла «src/corrections.css» (если оно не пустое). Последние три файла нужны для хранения: макросов, UI-макросов (например, чекбоксы) и коррекций (более точного позиционирования иконок).

3. compile/font — компиляция файлов «font.json» из файлов конфигурации (config.json) сервиса Fontello.

Собственно, последний пункт предназначен для того, чтобы можно было собрать свой иконсет по принципу, обозначенному в статье. Для этого нужно сделать следующее:

1. Собрать на Fontello набор иконок с normal-нечертанием. Прописать им названия. Коды прописывать не нужно. Получить config.json, поместить его в папку normal.

2. Собрать на Fontello набор иконок с bold-начертанием. Названия и коды приписывать не нужно. Получить config.json, поместить его в папку bold.

3. Собрать на Fontello набор иконок-символов. Прописать им названия. Коды прописывать не нужно. Получить config.json, поместить его в папку symbols.

4. Запустить «php index.php compile/font».

5. По очереди скормить каждый файл «font.json» сервису Fontello, чтобы скомпилировать шрифты как таковые.

Само собой после этого нужно будет запустить команду «compile», дабы скопилировать итоговый стиль.

В стилях существует несколько переменных:

1. —ddml-color-default — условно серый цвет (#5f6368).

2. —ddml-color-notice — условно голубой цвет (rgb(70, 130, 180)).

3. —ddml-color-success — условно зелёный цвет (rgb(60, 180, 120)).

4. —ddml-color-warning — условно рыжий цвет (rgb(180, 140, 10)).

5. —ddml-color-error — условно красный цвет (rgb(200, 90, 90)).

6. —ddml-color-disabled — цвет «неактивных иконок» (silver).

7. —ddml-text-stroke — толщина обрамления дингбата-модификатора (2px).

8. —ddml-text-stroke-color — цвет обрамления дингбата-модификатора (white).

Что осталось, что планируется?

Из недочётов на данный момент осталось только точное позиционирование origin-а иконки, дабы не возникало биений. Ещё надо будет на досуге сделать проекту страничку на github.io. Ну и само собой добавить наиболее расхожие макросы. Здесь принимаются предложения от сообщества в виде pull-реквестов. Только сначала просмотрите README. Возможно предлагаемый Вами макрос уже добавлен.

GitHub проекта

Благодарю всех за внимание!