Использование Font Awesome 5 в проекте React

Development | Amber | Комментировать запись

Font Awesome – это набор инструментов для веб-сайтов, который содержит иконки и логотипы социальных сетей. React – это гибкая библиотека для написания кода, которая часто используется для создания пользовательских интерфейсов. Команда Font Awesome создала специальный компонент React для содействия интеграции. В этом руководстве мы поговорим о Font Awesome 5 и его структуре. Также вы узнаете, как использовать компонент React Font Awesome.

Требования

Вам не обязательно писать код, чтобы проходить это руководство, но если вы хотите попробовать выполнить пару примеров, вам понадобится следующее:

• Локальная установка Node.js. Следуйте инструкциям для вашего дистрибутива: mac OS, Ubuntu, Debian, CentOS.
• Инструмент Create React App.

1: Использование Font Awesome

Команда Font Awesome создала компонент React, чтобы вы могли без труда использовать их вместе. С помощью этой библиотеки вы можете следовать нашему руководству (но сначала выберите иконку).

В примерах этого руководства мы будем использовать иконку home, а вся работа будет происходить в файле App.js. откройте этот файл:

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

Итак, после этого в приложении появится маленькая иконка home. Как видите, этот код выбирает только иконку home, следовательно, к размеру пакета нашего приложения добавляется только размер одной иконки.

После монтирования этого компонента инструмент Font Awesome заменит его SVG-версией выбранной иконки.

2: Выбор иконок

Прежде чем мы продолжим работу, важно разобраться, как структурированы библиотеки Font Awesome. Поскольку иконок в библиотеке очень много, команда решила разделить их на несколько пакетов.

Чтобы изучить возможные варианты и выбрать необходимые иконки, рекомендуется посетить специальную страницу на сайте Font Awesome. В левой части этой страницы вы найдете различные фильтры – они очень важны, потому что именно они сообщают, из какого пакета импортировать ту или иную иконку.

В приведенном выше примере мы извлекли иконку из пакета @fortawesome/free-solid-svg-icons.

Как определить, какому пакету принадлежит иконка?

Чтобы определить, к какому пакету относится нужная вам иконка, просмотрите на фильтры слева. Также можно кликнуть на иконку и увидеть пакет, которому он принадлежит.

Когда вы узнаете название необходимого вам пакета, важно запомнить его трехбуквенное сокращение:

• Solid Style – fas
• Regular Style – far
• Light Style – fal
• Duotone Style – fad

Найти определенный тип можно в левой панели на странице иконок.

Как использовать иконки из определенных пакетов?

Если вы внимательно просмотрите страницу иконок на сайте Font Awesome, вы заметите, что одна и та же иконка обычно существует в нескольких версиях. Например, введите в поиск boxing-glove – в результате вы увидите три иконки.

Чтобы использовать конкретную иконку, вам необходимо настроить <FontAwesomeIcon>. Ниже мы приведем несколько типов одной и той же иконки из разных пакетов. К ним относятся трехбуквенные сокращения, о которых мы говорили ранее.

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

Вот пример для пакета solid:

<FontAwesomeIcon icon={['fas', 'code']} />

Этот пакет используется по умолчанию, если не указано другое:

<FontAwesomeIcon icon={faCode} />

Пакет light используется с помощью сокращения fal:

<FontAwesomeIcon icon={['fal', 'code']} />;

Свойство icon нужно было изменить со строки на массив.

3: Установка Font Awesome

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

В этом мануале мы продемонстрируем, как установить несколько пакетов.

Выполните следующую команду, чтобы установить базовые пакеты:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

Следующая команда установит иконки regular:

npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons

Эта команда установит solid:

npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons

Используйте эту команду для установки иконок light:

npm i -S @fortawesome/pro-light-svg-icons

Эта команда установит иконки duotone:

npm i -S @fortawesome/pro-duotone-svg-icons

Следующая команда установит значки брендов:

npm i -S @fortawesome/free-brands-svg-icons

Если вы хотите установить все пакеты за один раз, вы можете использовать эту команду:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Эта команда устанавливает все бесплатные иконки.

Если у вас есть профессиональная учетная запись Font Awesome, вы можете использовать следующую команду:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

Она установит все иконки, включая профессиональные.

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

4: Создание библиотеки иконок

Импортировать нужную иконку в несколько файлов – не всегда простая задача. Допустим, если вы используете логотип Twitter в нескольких местах, вам едва ли захочется писать его несколько раз.

Чтобы импортировать все необходимое за один раз и не импортировать каждую иконку в отдельный файл, мы создадим библиотеку Font Awesome.

Давайте создадим файл fontawesome.js в папке src, а затем импортируем его в index.js. Вы сможете добавлять этот файл во все дочерние компоненты, в которых вы хотите использовать иконки. Вы даже можете сделать это прямо в своем файле index.js или App.js. Однако лучше собрать все иконки в отдельный файл, поскольку он может увеличиться со временем.

Итак, поместите в src/fontawesome.js следующее:

// import the library
import { library } from '@fortawesome/fontawesome-svg-core';

// import your icons
import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';

library.add(
  faMoneyBill,
  faCode,
  faHighlighter
  // more icons go here
);

Теперь этот файл нужно импортировать в index.js. откройте его и внесите строку:

import React from 'react';
import { render } from 'react-dom';

// import your fontawesome library
import './fontawesome';

render(<App />, document.getElementById('root'));

Импорт целого пакета иконок

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

Предположим для примера, что вам нужны все иконки брендов из пакета @fortawesome/free-brands-svg-icons. Чтобы импортировать все иконки, нужно открыть файл fontawesome.js и использовать следующее:

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

fab импортирует весь пакет с иконками брендов.

Индивидуальный импорт иконок

Рекомендуемый способ использования иконок из Font Awesome – импортировать их поштучно и только нужные, чтобы окончательные размеры вашего пакета были как можно меньше.

В файле fontawesome.js вы можете создать библиотеку из нескольких иконок, хранящихся в разных пакетах, например:

import { library } from '@fortawesome/fontawesome-svg-core';

import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
import { faImages } from '@fortawesome/pro-solid-svg-icons';
import {
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
} from '@fortawesome/free-brands-svg-icons';

library.add(
  faUserGraduate,
  faImages,
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
);

Импорт одной иконки из нескольких пакетов

Если вам нужны все доступные типы иконки boxing-glove (то есть иконки из пакетов fal, far и fas), вы можете импортировать их все под другим именем и затем добавить в свой fontawesome.js.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import {
  faBoxingGlove as faBoxingGloveRegular
} from '@fortawesome/pro-regular-svg-icons';
import {
  faBoxingGlove as faBoxingGloveSolid
} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faBoxingGlove,
    faBoxingGloveRegular,
    faBoxingGloveSolid
);

Затем вы можете использовать их при помощи разных префиксов.

<FontAwesomeIcon icon={['fal', 'boxing-glove']} />
<FontAwesomeIcon icon={['far', 'boxing-glove']} />
<FontAwesomeIcon icon={['fas', 'boxing-glove']} />

5: Использование иконок

Теперь, когда вы установили все то, что вам нужно, и добавили иконки  в библиотеку Font Awesome, мы можем использовать их и определить их размеры. В этом мануале мы будем использовать пакет light (fal).

В первом примере мы установим нормальный размер:

<FontAwesomeIcon icon={['fal', 'code']} />

Во втором примере мы попробуем использовать именованный размер, в нем используются сокращения для small (sm), medium (md), large (lg) и extra-large (xl):

<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />

Третий вариант – использовать нумерованные размеры (максимальное значение здесь – 6):

<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />

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

<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />

Font Awesome стилизует свои SVG, используя цвет текста CSS. Если мы поместим тег <p> туда, где будет расположена иконка, цвет иконки будет совпадать с цветом текста:

<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />

Font Awesome также предлагает функцию power transforms, с помощью которой вы можете объединять различные преобразования в рамках одной строки:

 <FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />

Вы можете использовать любые преобразования, перечисленные на сайте Font Awesome: перемещать иконки вверх, вниз, влево или вправо, чтобы добиться идеального позиционирования относительно текста или границ кнопок.

Иконки фиксированной ширины

Если все ваши иконки должны быть одинаковой ширины, Font Awesome позволяет использовать свойство fixedWidth. Допустим, вам нужна фиксированная ширина иконок для выпадающего меню в навигации:

<FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />

Вращающиеся иконки

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

<FontAwesomeIcon icon={['fal', 'spinner']} spin />

Вы можете использовать свойство spin где угодно:

<FontAwesomeIcon icon={['fal', 'code']} spin />

Маскировка иконок (продвинутая функция)

Font Awesome позволяет комбинировать две иконки и создавать таким образом эффекты маскировки. При этом нужно сначала определить обычную иконку, а затем использовать свойство mask, чтобы определить вторую, которая будет расположена поверх первой. Первая иконка при этом будет ограничена размерами маскирующей иконки.

В этом примере мы создали фильтры тегов, используя маскировку:

<FontAwesomeIcon
  icon={['fab', 'javascript']}
  mask={['fas', 'circle']}
  transform="grow-7 left-1.5 up-2.2"
  fixedWidth
/>

Обратите внимание: мы можем связать несколько свойств transform и с их помощью переместить внутреннюю иконку так, чтобы она соответствовала маскирующей иконке по размерам.

Мы даже можем раскрасить и изменить фоновый логотип с помощью Font Awesome.

6: react-fontawesome и иконки вне React

Если вы работаете не с одностраничным приложением (SPA), а с традиционным сайтом на React, вы можете избежать импорта главной библиотеки SVG/JS и библиотеки react-fontawesome. Для этого Font Awesome создал возможность использования библиотек React для отслеживания иконок вне компонентов React.

Если у вас есть <i class=”fas fa-stroopwafel”></i>, вы можете попросить Font Awesome просматривать и обновлять их. Для этого используйте следующее:

import { dom } from '@fortawesome/fontawesome-svg-core'
dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver

MutationObserver – это веб-технология, которая позволяет нам оперативно отслеживать изменения в DOM. Узнать больше о ней можно в документации React Font Awesome.

Заключение

Font Awesome и React – отличное сочетание, но при этом возникает необходимость в использовании нескольких пакетов иконок и поиске оптимальных комбинаций. В этом мануале мы поговорили об основах использования Font Awesome и React.