【JavaScript】ReactでFont Awesomeを利用する

村上 著者:村上

【JavaScript】ReactでFont Awesomeを利用する

タイトルにある通り、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 が厄介かと思ったので、今回はこちらの方法を使いました。
その辺りは、開発環境に応じて臨機応変に対応してください。

  • この記事いいね! (0)

著者について

村上

村上 administrator