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

Введение

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

Предварительные требования

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

• Локальная установка Node.js, выполненная согласно указаниям учебного модуля Установка Node.js и создание локальной среды разработки.
• Приложение React, которое вы можете создать согласно указаниям учебного модуля Настройка проекта React.

Шаг 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, чтобы ознакомиться с доступными вариантами. В левой части страницы вам будут доступны для выбора различные фильтры. Эти фильтры очень важны, потому что они будут указывать, из какого пакета нужно импортировать вашу иконку.

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

Определение пакета, к которому принадлежит иконка

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

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

• Сплошной стиль — fas
• Обычный стиль — far
• Легкий стиль — fal
• Двухтонный стиль — fad

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

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

При просмотре страницы иконок Font Awesome вы должны увидеть, что обычно есть несколько версий одной и той же иконки. Возьмем в качестве примера иконку boxing-glove:

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

Приведем пример сплошной версии.

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

Если тип не указан, по умолчанию используется сплошная версия.

<FontAwesomeIcon icon={faCode} />

И облегченная версия с использованием fal:

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

Нам нужно было переключить запись icon, чтобы это был массив, а не простая строка.

Шаг 3 — Установка Font Awesome

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

Для целей этой статьи мы установим все, чтобы продемонстрировать процедуру установки нескольких пакетов.

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

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

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

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

Эти команды установят сплошные иконки:

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

Используйте эту команду для облегченных иконок:

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

Эта команда установит двухтонные иконки:

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

Наконец, эта команда установит иконки бренда:

# brand 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. Однако лучше вынести его в отдельный файл, поскольку он может оказаться большим:

// 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. Для импорта всего пакета целиком потребуется следующее:

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

library.add(fab);

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

Импорт иконок по отдельности

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

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

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, вы можете импортировать их все под другим именем, а затем добавить их.

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 и можете использовать их и назначать им размеры. В этом учебном модуле мы будем использовать облегченный пакет (fal).

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

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

Во втором примере можно использовать имена размеров с сокращениями для малого (sm), среднего (md), большого (lg) и очень большого (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.