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

React

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

FontAwesomeをReactにインストール

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

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

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

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

コメント

タイトルとURLをコピーしました