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

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

Font Awesome — это иконочный шрифт, который вместо цифр и букв содержит символы и глифы. Создатели шрифта выпустили первую партию иконок еще в далеком 2012 году, с тех пор они размещены на страницах как минимум 100 миллионов веб-сайтов. Коллекция иконок постоянно пополняется, как и разрабатываются новые способы их интеграции в интернет-пространство с использованием фреймворков.  

Знакомство с Font Awesome 5

Новая версия вышла относительно недавно, но сразу же стала востребованной. Разработчики и дизайнеры отметили ряд изменений:

1. Современный адаптивный дизайн иконок
2. Появление анимационных иконок
3. Две версии: 1608 free & 7864 pro
4. 4 стиля
5. Новая сетка
6. Хорошая читабельность при небольшом кегле

И, несмотря на то, что пользователи по всему миру имеют доступ к одним и тем же пакетам значков, их можно с легкостью персонализировать. Мы покажем, как с помощью CSS изменить цвет, размер, положение и полностью преобразовать первоначальный вид иконок Font Awesome. Для этого достаточно уметь работать с React и следовать пошаговой инструкции.  

Что такое React?

Зачастую начинающие разработчики ошибаются и считают React фреймворком, который используется для веб-разработки. Однако, это библиотека программирования, которая предназначена для создания пользовательских интерфейсов. Его основная задача – вывести на страницу компонент интерфейса, синхронизируя его с данными приложения. Создание интерфейса осуществляется путем разбиения каждой страницы на небольшие фрагменты. Эти фрагменты называются компонентами.

Благодаря этому есть возможность уделять меньше внимания коду, сосредоточившись на каждом компоненте приложения в отдельности. При использовании библиотеки программирования время запуска цифрового продукта значительно сокращается. 

Как использовать Font Awesome 5 с React

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

Четыре стиля иконок:

1. Solid (сплошной стиль — fas)
2. Regular (обычный стиль — far)
3. Light (легкий стиль — fal)
4. Brands (двухтонный стиль — fab)

Пакет значков Free Solid абсолютно бесплатный. Остальные 3 файла относятся к платной версии. Найти всю коллекцию иконок можно на официальном сайте. На панели слева расположены фильтры, по которым можно выбрать и установить понравившийся пакет. На сайте есть множество значков, включая логотипы известных брендов и таких приложений, как YouTube, Facebook, Tumblr. Чтобы использовать иконки, нужно произвести их установку.

Установка пакета

Если вы уже ознакомились со стилями иконок, можно стартовать. На этом этапе переходим к интеграции Font Awesome в компонент React. В нашем примере для установки пакетов в проект будет использоваться NPM (Node Package Manager). Серверная платформа Node.js. подходит для создания веб-приложений при выполнении JavaScript-кода.

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm install --save @fortawesome/free-solid-svg-icons
$ npm install --save @fortawesome/react-fontawesome

Также у NPM есть аналог Yarn, который при желании можно использовать. Импорт Font Awesome осуществляет следующим образом:

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome

Как мы писали выше, есть 4 стиля значков. Сейчас мы продемонстрируем установку сразу всех пакетов иконок, а вы сами решаете, какие подходят для вашего проекта.

Для этого нужно выполнить команды:

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

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

Первый способ: Явный импорт иконок

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

Ниже мы показываем пример, как добавить иконки первым способом. После установки необходимых пакетов нужно выполнить следующие команды:

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoctail } from '@fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoctail} /> ReactDOM.render(element, document.body)

В нашем примере мы импортировали значок faCoctail из библиотеки значков svg.

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

Второй способ: Создание библиотеки иконок

Этот метод более эффективный и, скорее всего, подойдет для вашего проекта. При создании библиотеки иконки добавляются в приложение React один раз, а затем мы просто будем ссылаться на импорт в дочерних компонентах. На нем остановимся более подробно.

Суть этого способа в том, чтобы импортировать иконки в библиотеку Font Awesome из fontawesome-svg-core, а затем добавить необходимые значки.  Добавив иконки faCocktail и faBomb в библиотеку, мы можем ссылаться на них по всему приложению.

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoctail, faBomb} from '@fortawesome/free-solid-svg-icons'
library.add(fab, faCoctail, faBomb)

В строке library.add() вы можете добавить любой значок из стиля brands, сославшись по имени значка в любом компоненте приложения React. Также добавив значки faCoctail и faBomb по отдельности, мы можем ссылаться на них в нашем приложении по именам строк значков «coctail» и «bomb». Как это происходит, мы покажем на примере:

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 export const Drink = () => (
  <div>
         <FontAwesomeIcon icon="bomb" />
         Favorite Drink: <FontAwesomeIcon icon="cocktail" />
  </div>
)

В этом фрагменте кода видно, как приступить к использованию значков, добавленных в библиотеку. То есть, нет необходимости снова их импортировать на уровне компонентов, как это описано в первом способе. Из всего этого можно сделать обширную библиотеку значков, которые нужны вашему приложению.

Редактирование иконок

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

Размер иконок

В обновленной версии Font Awesome 5 появилась возможность менять размер иконок. Они разделены на малые, средние, большие и тд. Задать размер можно именем (xs, sm, md, lg, xl) или номером (2x, 3x, 4x, 5x, 6x).

Задаем нужный размер при помощи атрибута CSS:

// Size based on numbers
<FontAwesomeIcon icon="spinner" size="2x" />
<FontAwesomeIcon icon="spinner" size="3x" />
<FontAwesomeIcon icon="spinner" size="4x" />
<FontAwesomeIcon icon="spinner" size="5x" />
<FontAwesomeIcon icon="spinner" size="6x" />
 
// Size based on names
<FontAwesomeIcon icon="spinner" size="xs" />
<FontAwesomeIcon icon="spinner" size="sm" />
<FontAwesomeIcon icon="spinner" size="md" />
<FontAwesomeIcon icon="spinner" size="lg" />
<FontAwesomeIcon icon="spinner" size="xl" />

Поворот иконок

Также стало возможным задать расположение значка в пространстве, разместив его в вертикальном, горизонтальном положении или отразив зеркально. Чтобы повернуть иконку, необходимо указать угол поворота в градусах (90, 180, 270).

Для этого выполните следующие команды:  

<FontAwesomeIcon icon="spinner" flip="horizontal" />
<FontAwesomeIcon icon="spinner" flip="both" />
<FontAwesomeIcon icon="spinner" flip="vertical" />
 
<FontAwesomeIcon icon="coctail" rotation={90} />
<FontAwesomeIcon icon="coctail" rotation={180} />
FontAwesomeIcon icon="coctail" rotation={270} />

Цвет иконок

Лучше всего стилизовать иконки получается благодаря добавлению яркости и цвета. Для этого используются все цвета CSS. В нашем случае мы сделаем иконку зеленой, задав в строке кода цвет.

<FontAwesomeIcon icon="square" color="green" />

Анимация значков

Чтобы задать иконкам движения и добавить анимацию, используем команду «вращение» или «пульсация». Вращение иконок, как правило, применяется для создания эффекта загрузки.

<FontAwesomeIcon icon="spinner" pulse />
<FontAwesomeIcon icon="spinner" spin />

Преобразование мощности: power transforms

С появлением в Font Awesome 5 новой функции power transforms стало возможным связать все трансформации вместе, используя одну строку кода. В нашем примере мы отобразили, как можно перемещать, сжимать и поворачивать иконку.

<FontAwesomeIcon icon="spinner" transform="shrink-6 left-4" />
<FontAwesomeIcon icon="spinner" transform={{ rotate: 45 }} />

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

Подведем итоги

Если вы создаете приложение на базе React, то Font Awesome станет незаменимым помощником, чтобы находить подходящие иконки и логотипы для социальных сетей. С помощью применения дополнительных инструментов можно реализовать любую идею и сделать стиль своего приложения уникальным и узнаваемым на рынке. А надежную платформу для вашего приложения всегда предоставит timeweb.cloud.