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

Введение

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

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

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

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

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

Шаг 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.