ReactにFont Awesomeを組み込む方法

React に Font Awesome を組み込んで表示させるには npm を使って react-fontawesome をインストールします。

React 環境の作成方法は以下のサイトを参照して作成してください。

Next.jsでReactを使った開発環境を作成する方法

Reactを利用してアプリケーションを作成する環境を作るには「npx create-react-app」もしくは「npx...

lightgauge.net

ReactにFont Awesomeを組み込む方法

React に Font Awesome を組み込んで Web アイコンフォントを表示させます。

ReactにFont Awesomeをインストール

まずは Next.js の環境に Font Awesome をインストールします。

インストーるするには以下のコマンドを create-app した Next.js のフォルダーで実行します。

    npm install @fortawesome/react-fontawesome
    npm install @fortawesome/fontawesome-svg-core

brands, regular, solid の3つのタイプのフォントを表示させたい方は以下のコマンドを追加で実行します。

    npm install @fortawesome/free-brands-svg-icons
    npm install @fortawesome/free-regular-svg-icons
    npm install @fortawesome/free-solid-svg-icons

インストールした後の package.json は以下のようになりました。

{
  "name": "next-sample",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.15",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1"
  }
}

これで準備は完了です。

Font Awesomeをインポートする

Font Awesome を React にインポートするするには以下のように行います。

import React from "react" ;
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" ;
import { faGlasses } from "@fortawesome/free-solid-svg-icons/faGlasses" ;

1行目は React のインポートです。

2行目は Font Awesome のインポートです。

3行目は表示させるアイコン（今回はメガネアイコン）をインポートしています。

表示させるアイコンは Font Awsome の表示させたいアイコンのページでページ上部にある名称を元に fa-glasses → faGlasses と変換してインポートします。

<i class="fas fa-glasses"></i>

を

import { faGlasses } from "@fortawesome/free-solid-svg-icons/faGlasses" ;

に変換。

Font Awesomeアイコンの表示

Font Awesome を表示させるには以下のように FontAwesomeIcon コンポーネントを利用します。（ソース名は FontAwsome.js で作成）

import React from "react" ;
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" ;
import { faGlasses } from "@fortawesome/free-solid-svg-icons/faGlasses" ;

export default class TestFontAwsome extends React.Component {
  constructor( props ){
    super( props ) ;
  }
  render(){
    return(
      <FontAwesomeIcon icon={faGlasses} />
    ) ;
  }
}

これで Next.js をコマンドプロンプトで起動し

npm run dev

ブラウザーでアクセスすると

ｈttp://localhost:3000/FontAwsome

がブラウザー上に表示されます。

Font Awesomeアイコンの色を変える

Font Awesome アイコンの色を変えるには color 属性で変更することができます。

import React from "react" ;
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" ;
import { faGlasses } from "@fortawesome/free-solid-svg-icons/faGlasses" ;

export default class TestFontAwsome extends React.Component {
  constructor( props ){
    super( props ) ;
  }
  render(){
    return(
      <FontAwesomeIcon icon={faGlasses} color={"red"}/>
    ) ;
  }
}

これでがで表示されます。

まとめ

React に Font Awesome を組み込んで表示させるには react-fontawesome をインストールし表示さます。

利用するコンポーネントは FontAwesomeIcon になります。