FontAwesomeをReactにインストール使い方ガイド

FontAwesomeをReactで使えるようにインストールする方法を解説します。

FontAwesomeをReactにインストール
react-fontawesomeの使い方

FontAwesomeをReactにインストール

まずは下記コマンドでFontAwesomeをインストールしてください。

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

これでFontAwesomeのSolidアイコンが使えるようになります。BrandやRegularのアイコンも使いたい場合は、合わせて以下もインストールしてください。

npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

react-fontawesomeの使い方

react-fontawesomeを使うには@fortawesome/react-fontawesomeと使いたいフォントタイプをimportします。Solidなら@fortawesome/free-solid-svg-iconsです。

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

アイコンをimportするときは忘れずにケバブケースをキャメルケースに直してください。例えばfa-twitterならfaTwitterとしてください。

@fortawesome/react-fontawesome

Official React component for Font Awesome 5. Latest version: 0.2.0, last published: 9 months ago. Start using @fortawesome/react-fontawesome in your project by ...