ReactでFontAwesomeのアイコンを使用する。～導入編～

f:id:Surprisedblog:20210613204342p:plain

FontAwesomeアイコンをReactコンポーネントとして使用できる！
FontAwesomeとは
ReactでFontAwesomeを導入する
- プラスアイコンを表示する（サンプルコード付き）
  - パッケージのインストール
  - サンプルコード
まとめ

FontAwesomeアイコンをReactコンポーネントとして使用できる！

WebアプリをReactで開発するときに、様々なライブラリを使用することができますが、FontAwesomeのアイコンもReactコンポーネントとして使用することができます。

※今回は無料のアイコンを使用することを前提に記事を書いています。

FontAwesomeとは

FontAwesomeとは、Webで最も人気があると言われている（公式に書いてある）アイコンセットであり、ツールキットです。無料で始めることもでき、有料契約をすることで1500ほどのアイコンから、追加で8000ほどのアイコンを使用できるようになります。

FontAwesomeのiconは多くのサイトで見かけます。また、Web開発の技術情報系のブログでFontAwesomeのアイコンを使用している記事もよく見ます。

ReactでFontAwesomeを導入する

以下のサイトを参考に、npmパッケージマネージャーを使用してパッケージをインストールします。

fontawesome.com

プラスアイコンを表示する（サンプルコード付き）

無料のアイコンの場合は、次のアイコンの種類が使用できます。

Solid
Regular
Brands

それぞれのアイコンは上記の3種類に属しているので、使用するアイコンによってインストールするパッケージが変わってきます。今回は、「プラスアイコン」を使用してサンプルコードを書いていきます。

アイコンのプレビューは次のページから見ることができます。

fontawesome.com

パッケージのインストール

プラスアイコンはsolidのアイコンなので、次のパッケージをインストールします。

npm install -D @fortawesome/fontawesome-svg-core
npm install -D @fortawesome/free-solid-svg-icons
npm install -D @fortawesome/react-fontawesome

サンプルコード

TypeScript/JSXのサンプルコードになります。

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

ReactDOM.render(
  <FontAwesomeIcon icon="{faPlus}"></FontAwesomeIcon>,
  document.getElementById("test")
);

出力されるHTMLは次のようになります。