Введение
Font Awesome — инструментарий для сайтов, предоставляющий иконки и логотипы для социальных сетей. React — библиотека программирования, используемая для создания пользовательских интерфейсов. Хотя команда Font Awesome выпустила компонент React для поддержки интеграции, разработчикам следует знать базовые принципы работы и структуру Font Awesome 5. В этом учебном модуле вы научитесь использовать компонент React 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
, так что размер нашего пакета увеличивается только на одну иконку.
Теперь 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
. Однако лучше вынести его в отдельный файл, поскольку он может оказаться большим:
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
для определения второй иконки, расположенной поверх нее. Размеры первой иконки ограничиваются маскирующей иконкой.
В этом примере мы создали фильтры тегов, используя маскировку:
<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.