Поиск по сайту:

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

Введение

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

Предпосылки

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

  • Node.js установлен локально, что можно сделать, следуя инструкциям по установке Node.js и созданию локальной среды разработки.
  • Как настроить проект React.

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

Команда Font Awesome создала иконку для выбора.

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

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

Шаг 2 — Выбор значков

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

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

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

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

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

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

  • Сплошной стиль – fas
  • Обычный стиль — far
  • Светлый стиль – fal
  • Двухцветный стиль – причуда

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

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

Если вы просмотрите страницу значков Font Awesome, вы заметите, что обычно существует несколько версий одного и того же значка. Например, давайте взглянем на значок боксерская перчатка:

Чтобы использовать определенный значок, вам нужно будет настроить . Ниже приведены несколько типов одного и того же значка из разных пакетов. К ним относятся трехбуквенные сокращения, обсуждавшиеся ранее.

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

Вот пример твердой версии:

<FontAwesomeIcon icon={['fas', 'code']} />

По умолчанию используется твердая версия, если тип не указан:

<FontAwesomeIcon icon={faCode} />

И облегченная версия с использованием fal:

<FontAwesomeIcon icon={['fal', 'code']} />;

Нам пришлось переключить свойство icon на массив, а не на простую строку.

Шаг 3 — Установка Font Awesome

Поскольку существует несколько версий значка, несколько пакетов и бесплатные/профессиональные пакеты, для их установки требуется более одного пакета npm. Возможно, вам придется установить несколько, а затем выбрать нужные значки.

В этой статье мы установим все, чтобы продемонстрировать, как установить несколько пакетов.

Выполните следующую команду, чтобы установить базовые пакеты:

  1. npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

Выполните следующие команды, чтобы установить обычные значки:

  1. # regular icons

  2. npm i -S @fortawesome/free-regular-svg-icons

  3. npm i -S @fortawesome/pro-regular-svg-icons

Они установят сплошные значки:

  1. # solid icons

  2. npm i -S @fortawesome/free-solid-svg-icons

  3. npm i -S @fortawesome/pro-solid-svg-icons

Используйте эту команду для светлых значков:

  1. # light icons

  2. npm i -S @fortawesome/pro-light-svg-icons

Это установит двухцветные значки:

  1. # duotone icons

  2. npm i -S @fortawesome/pro-duotone-svg-icons

Наконец, это установит значки брендов:

  1. # brand icons

  2. npm i -S @fortawesome/free-brands-svg-icons

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

  1. 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, вы можете установить все значки следующим образом:

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

// 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:

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. Вы должны использовать следующее для импорта всего пакета:

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

library.add(fab);

fab представляет весь пакет значков бренда.

Импорт значков по отдельности

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

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

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

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

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

Если у вас есть какие-либо , мы можем указать 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

Документы React Font Awesome.

Заключение

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