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

Как я уже упоминал в одном из комментариев, у меня есть свой фреймворк — 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-файла. Но если Вам нужно, чтобы иконки можно было просмотреть без запуска сервера, Вы можете:

Перейти в папку пакета.
Выполнить команду "php index.php compile".
Использовать получившийся файл index.html.

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

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

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

Собрать на Fontello набор иконок с normal-нечертанием. Прописать им названия. Коды прописывать не нужно. Получить config.json, поместить его в папку normal.
Собрать на Fontello набор иконок с bold-начертанием. Названия и коды приписывать не нужно. Получить config.json, поместить его в папку bold.
Собрать на Fontello набор иконок-символов. Прописать им названия. Коды прописывать не нужно. Получить config.json, поместить его в папку symbols.
Запустить "php index.php compile/font".
По очереди скормить каждый файл "font.json" сервису Fontello, чтобы скомпилировать шрифты как таковые.

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

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

--ddml-color-default - условно серый цвет (#5f6368).
--ddml-color-notice - условно голубой цвет (rgb(70, 130, 180)).
--ddml-color-success - условно зелёный цвет (rgb(60, 180, 120)).
--ddml-color-warning - условно рыжий цвет (rgb(180, 140, 10)).
--ddml-color-error - условно красный цвет (rgb(200, 90, 90)).
--ddml-color-disabled - цвет "неактивных иконок" (silver).
--ddml-text-stroke - толщина обрамления дингбата-модификатора (2px).
--ddml-text-stroke-color - цвет обрамления дингбата-модификатора (white).

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

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

GitHub проекта

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

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