Узнайте, как создать собственный шрифт с иконками из SVG-файлов и интегрировать его в Angular-проект с помощью Fantasticon.

В предыдущих статьях мы рассмотрели, как подключать любые CSS-фреймворки в ваш проект. В качестве примера мы использовали Bootstrap и применили его в Angular проекте. К концу последней статьи у вас уже была определённая структура папок и возможность кастомизировать проект под свои нужды.

Иконки

Сегодня почти каждый веб-проект использует иконки. Это отличный инструмент визуальной коммуникации, который помогает акцентировать внимание на элементах интерфейса. Существует хорошая статья о том, почему стоит использовать иконки — "Icons in Web Design". Но эта статья отвечает на другой вопрос — как их использовать?

Все современные UI-фреймворки уже включают в себя набор стандартных иконок. Кроме того, есть множество готовых библиотек с иконками, которые можно легко подключить. Однако у них есть два существенных недостатка:

• Вы не можете изменить внешний вид иконок — их форма, размер и стиль заранее предопределены.

• Вы не можете расширить набор своими собственными иконками.

Стоит упомянуть, что все дальнейшие примеры будут показаны на основе Angular приложения. Однако эти подходы можно адаптировать и к другим фронтенд-фреймворкам. Предполагается также, что у вас есть базовые знания о менеджерах пакетов вроде Yarn или npm.

Возможные решения

Существуют разные способы преодолеть вышеупомянутые ограничения. Каждый из них имеет свои плюсы и минусы, и правильный подход — использовать подходящий инструмент в зависимости от задачи:

• Иконка как изображение.

• Отдельный Angular-компонент.

• Иконочный шрифт.

• SVG-спрайт.

Первые два варианта наиболее просты, а мы сосредоточимся на третьем решении (в этой статье) и четвёртом (в следующей).

Иконочный шрифт

Библиотеки иконок вроде Font Awesome или Material Icons — очень популярны и широко используются. Поэтому здесь мы не будем подробно разбирать их плюсы и минусы. Вместо этого мы покажем, как создать свой собственный шрифт с иконками с помощью пакета Fantasticon. Конечно, вы можете использовать и любую другую библиотеку — большинство из них работают по схожим принципам.

Структура папок

На первом шаге нужно сделать некоторые приготовления. Создайте новую папку с именем _ внутри /src/styles/. Обычно я использую её для автоматически сгенерированных SCSS-файлов.

Помимо этого, создайте две папки — icons и fonts — внутри /src/assets/. В icons будут исходные SVG-файлы, из которых будет собираться шрифт. В fonts — сгенерированные файлы шрифта.

Итоговая структура должна выглядеть так:

/src
  /assets
    /fonts
    /icons
  /styles
    /_
    /common
    /components
    /forms
      ├── _btn.scss
    /mixins
    /variables
      ├── _bootstrap.scss
      ├── _palette.scss
      ├── variables.scss
    /vendor
    ├── app.scss
    ├── vendor.scss
  styles.scss

Подготовка изображений

Теперь нужно подготовить SVG-иконки для генерации шрифта. Этот шаг может показаться немного более сложным, но базовых знаний любого векторного редактора (например, Adobe Illustrator) будет достаточно. Я придерживаюсь следующих простых правил:

• Все изображения должны быть квадратными (ширина = высота).

• Используйте одинаковые размеры для всех иконок (например, 50x50px или 100x100px).

• Все визуальные атрибуты (к примеру: заливка, обводка, эффекты) нужно превратить в отдельные объекты.

• Удалите все комментарии из SVG кода.

По последнему пункту: Adobe Illustrator, к примеру, добавляет в файл такой комментарий:  <! — Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In. SVG Version: 6.00 Build 0) →. Этот комментарий может привести к багам при генерации шрифта и его следует удалить вручную.

Допустим, у нас есть три иконки: angle-left.svg, angle-down.svg, angle-right.svg. Копируем их в /src/assets/icons/, чтобы сгенерировать шрифт из них.

Установка Fantasticon

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

Пакет можно установить глобально, но я предпочитаю добавлять его локально для каждого проекта - это полезно при работе в команде:

yarn add fantasticon --dev

Затем создайте файл .fantasticonrc в корне проекта со следующим содержимым:

module.exports = {
    name: 'Your-Icons',
    inputDir: './src/assets/icons',
    outputDir: './src/assets/fonts',
    fontTypes: ['eot', 'woff2', 'woff', 'ttf'],
    assetTypes: ['css'],
    fontsUrl: '/assets/fonts',
    pathOptions: {
        css: './src/styles/_/icon-font.scss',
    },
};

Для завершения настройки добавьте в package.json новую команду:

...
"icon": "fantasticon -c .fantasticonrc"
...

Завершающие шаги

Теперь запустите команду yarn icon, чтобы сгенерировать:

• Файлы шрифтов: Your-Icons.eot, Your-Icons.ttf, Your-Icons.woff, Your-Icons.woff2 в /src/assets/fonts/

• SCSS-файл icon-font.scss расположенный в /src/styles/_/ и содержащий классы для всех иконок.

Подключите SCSS-файл в начало src/styles/app.scss:

// auto-generated files
@import './_/icon-font';
...

И добавьте шрифты в список ресурсов в angular.json:

...
"assets": [
    "src/assets/fonts/",
    {
        "glob": "**/*",
        "input": "public"
    }
],
...

На этом все! Теперь для использования любой иконки в HTML шаблоне достаточно написать:

...
<i class="icon icon-angle-left"></i>
...

Чтобы добавить новые иконки — просто положите SVG-файлы в /src/assets/icons/ и снова выполните yarn icon. Все файлы обновятся, и вы сможете использовать новые иконки в проекте.

Заключение

В этой статье мы разобрали, как создать иконочный шрифт из собственных SVG-файлов и использовать его в Angular-проекте. В результате вы получили:

• Полную структуру с файлами иконок, иконочными шрифтами и всеми SCSS-файлами.

• Установленный пакет Fantasticon с настроенным конфигом .fantasticonrc.

• Новую команду icon в package.json для регенерации шрифта.

В следующей статье мы рассмотрим работу с иконками через SVG-спрайты. Следите за обновлениями!