Как найти имена иконок для Font Awesome для импорта с помощью React?

Question

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

Например, на веб-сайте значок «кофе».Но для добавления в библиотеку мне нужно использовать -

library.add (faCoffee)

, тогда я могу использовать его как -

Как мненайди иконку Реагируй название т.е. faCoffee для кофе?

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee);

<FontAwesome icon="coffee" />

Answer 1

Я бы посоветовал использовать реагировать-значки поверх пакета @fortawesome для популярных пакетов значков. React-icons хорошо, потому что он обеспечивает ES6 поддержку различных популярных значков, позволяя включать толькозначки, которые фактически используются в вашем react проекте.Ниже перечислены некоторые популярные поддерживаемые пакеты значков в react-icons:

1. Font Awesome
2. Ionicons
3. Значки дизайна материалов
4. Typicons
5. И многое другое для полного списка смотрите здесь

Для вашего конкретного случая вы можете легко использовать иконки Font Awesome и искать точное название значка, который выпытаясь использовать, выполнив следующее:

1. Установите пакетact-icons

   npm install react-icons --save

2. Найдите свойтребуемый значок и точное имя импорта здесь

3. Импортируйте и используйте нужный значок в своем проекте react, например значок Font Awesome coffee:

   import { FaCoffee } from 'react-icons/fa'; <FaCoffee />

Пакет react-icons чрезвычайно прост в использовании и, по моему опыту, был менее сложным, чем другие пакеты значков для проектов react.

Надеюсь, это поможет!

Answer 2

fa - это сокращение от шрифта, я верю. Вы можете найти все имена иконок здесь здесь

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

См. Песочницу здесь