FontAwesome - один из лучших бесплатных инструментов для работы с иконками, который вы можете использовать на своих веб-сайтах. В этом посте я научу вас, как настроить FontAwesome для использования в React. всего за 4 шага.

1. установите пакеты с помощью следующих команд:

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

2. После установки создайте другой файл, например: «fontawesome-library.js».

3. Создайте библиотеку в этом новом файле следующим образом:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare} from '@fortawesome/free-solid-svg-icons'
library.add( faCheckSquare, faTwitter)

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

теперь предположим, что я хочу использовать значок twitter, поэтому я импортирую его следующим образом:
fa + Twitter = faTwitter

4. использование:

Теперь откройте файл, в котором вы хотите использовать значки, например App.js, и импортируйте fontawesome:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './fontawesome-library.js';

есть небольшая разница в использовании сплошных значков и значков брендов.

твердый:

<FontAwesomeIcon icon="check-square" />

бренды:

<FontAwesomeIcon icon={['fab', 'twitter']} />

поделитесь статьей, если она вам поможет.