Tutorial

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

JavaScriptReact

Введение

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

Сайт Font Awesome с иконками

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

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

Шаг 1 — Использование Font Awesome

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

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

src/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, так что размер нашего пакета увеличивается только на одну иконку.

песочница кода с иконкой home

Теперь Font Awesome сделает так, что этот компонент заменит себя версией SVG этой иконки после монтирования компонента.

Шаг 2 — Выбор иконок

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

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

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

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

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

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

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

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

страница иконок с несколькими названиями пакетов слева

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

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

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

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:

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

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

library.add(fab);

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

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

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

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

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

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

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

Фильтры тегов с Font Awesome

<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.

Creative Commons License