Использование Font Awesome 5 с React
Если вы уже знакомы со всеми преимуществами, особенностями и структурой Font Awesome, то можете сразу переходить к практике. Для этого мы подготовили подробную инструкцию по добавлению символов в своей проект. А новичкам в веб-разработке рекомендуем детально изучить весь материал, и только потом приступить к реализации своих идей.
Font Awesome — это иконочный шрифт, который вместо цифр и букв содержит символы и глифы. Создатели шрифта выпустили первую партию иконок еще в далеком 2012 году, с тех пор они размещены на страницах как минимум 100 миллионов веб-сайтов. Коллекция иконок постоянно пополняется, как и разрабатываются новые способы их интеграции в интернет-пространство с использованием фреймворков.
Знакомство с Font Awesome 5
Новая версия вышла относительно недавно, но сразу же стала востребованной. Разработчики и дизайнеры отметили ряд изменений:
- Современный адаптивный дизайн иконок
- Появление анимационных иконок
- Две версии: 1608 free & 7864 pro
- 4 стиля
- Новая сетка
- Хорошая читабельность при небольшом кегле
И, несмотря на то, что пользователи по всему миру имеют доступ к одним и тем же пакетам значков, их можно с легкостью персонализировать. Мы покажем, как с помощью CSS изменить цвет, размер, положение и полностью преобразовать первоначальный вид иконок Font Awesome. Для этого достаточно уметь работать с React и следовать пошаговой инструкции.
Что такое React?
Зачастую начинающие разработчики ошибаются и считают React фреймворком, который используется для веб-разработки. Однако, это библиотека программирования, которая предназначена для создания пользовательских интерфейсов. Его основная задача – вывести на страницу компонент интерфейса, синхронизируя его с данными приложения. Создание интерфейса осуществляется путем разбиения каждой страницы на небольшие фрагменты. Эти фрагменты называются компонентами.
Благодаря этому есть возможность уделять меньше внимания коду, сосредоточившись на каждом компоненте приложения в отдельности. При использовании библиотеки программирования время запуска цифрового продукта значительно сокращается.
Как использовать Font Awesome 5 с React
Перед началом настройки React Font Awesome необходимо определиться, какие иконки понадобятся вам. Чтобы не импортировать сразу все, их разделили на 4 пакета в соответствии со стилем. Обратите внимание на трехбуквенные сокращения, поскольку в дальнейшем мы будем использовать именно его.
Четыре стиля иконок:
- Solid (сплошной стиль — fas)
- Regular (обычный стиль — far)
- Light (легкий стиль — fal)
- 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.