Чтобы использовать иконки Font Awesome в React, начни с установки пакета через npm:
npm install --save font-awesome
Потом импортируй стили Font Awesome в главный файл точки входа (обычно это index.js или main.js):
import 'font-awesome/css/font-awesome.min.css'
Этот импорт гарантирует, что все стили иконок Font Awesome будут доступны по всему твоему приложению.
Добавляй иконки Font Awesome в свои компоненты, используя атрибут className с соответствующими классами Font Awesome. Стандартный формат выглядит так:
fa — базовый класс Font Awesomefa-[icon-name] — конкретная иконка, которую ты хочешь отобразитьПример использования:
render() {
return <div><i className={'fa fa-spinner'} /></div>
}
Или с использованием современного синтаксиса React:
function MyComponent() {
return <i className="fa fa-spinner" />
}
<i> как контейнер для иконок Font Awesomefa и конкретный класс иконки (например, fa-spinner, fa-heart, fa-user)Такой подход даёт простой и эффективный способ интегрировать сотни масштабируемых векторных иконок в твои React-приложения.
Stylesheets Font Awesome нужно импортировать в каждый файл компонента, где используются иконки, чтобы обеспечить правильное оформление.
Новый — ещё не проверен сообществом
Вы