タイトルにある通り、Reactを導入しているプロジェクトで Font Awesome を利用したかったので、その導入方法についてです。
なお、導入手順は Font Awesome の公式サイトでも説明されていますので、そちらをご覧になっても良いかと。
ページはこちらから。
React | Font Awesome
https://fontawesome.com/how-to-use/on-the-web/using-with/react
導入方法ですが、まずは下記のコマンド3つを実行します。
npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/react-fontawesome
無事インストールが完了したら、下記コードを参考に、プロジェクトに Font Awesome をインポートします。
import React from 'react'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleLeft } from '@fortawesome/free-solid-svg-icons';
library.add(faAngleLeft);
export const Sample = () => (
<div>
Font Awesome: <FontAwesomeIcon icon="faAngleLeft" />
</div>
)
Font Awesome に関連したインポート類は、2～5行目にあたります。
4、5行目は、使用したいアイコンに応じて変更してください。
なお、上記のコードは、iタグ を使用して記述する場合、下記のようになります。
<i class="fas fa-angle-left"></i>
クラスで指定している「fa-angle-left」をキャメルケースで書き直しています。
導入手順は以上です。
あとは、お好きなアイコンを指定してお使いください。
以上、Reactで Font Awesome を導入する方法でした。
通常の、HTML の Head で linkタグを使用する方法でも良かったかもしれませんが、そうすると今度は Cordova の Content-Security-Policy が厄介かと思ったので、今回はこちらの方法を使いました。
その辺りは、開発環境に応じて臨機応変に対応してください。
