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']} />
поделитесь статьей, если она вам поможет.