Gutenbergでreact-fontawesomeを使う方法

Gutenbergでブロックを作る時にfontawesomeを使う事があると思います。
調べてみると、Reactでfontawesomeを使う方法が載っていたので、折角なのでreact-fontawesomeを使ってみることにしました。

react-fontawesomeを開発環境にインストールする

インストール方法はHow to Install and UseやGitHubのreact-fontawesomeーInstallationに記載されています。

詳細は上記リンク先を御覧ください。

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

フリーのSVGアイコンは他にも、brandsとregularがあるので、それを使いたい場合は下記もインストールする必要があります。

$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons

Gutenbergでreact-fontawesomeを使う場合

Gutenbergでブロックを作成する時は、恐らくブロックを作成するファイル（私の場合はblock.js）に記載することになると思います。

ファイル内の上位に下記を記述しています。

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStar,faStarHalfAlt,faStarAndCrescent,faStarOfLife } from '@fortawesome/free-solid-svg-icons'

必要なSVGのみ読み込む

react-fontawesomeの良いところは、必要なアイコンのみ使用するところです。

例えば、評価の星をfontawesomeで表示する場合は、node_modules/@fortawesome/free-solid-svg-iconsフォルダ内の中から使用したSVGが書かれたjsファイルのファイル名を【import{}】内に記述します。

faStarHalfAlt.jsだったら、faStarHalfAltの部分を記述します。
使用したいSVGをコンマ区切りで記述します。

import { faStar,faStarHalfAlt,faStarAndCrescent,faStarOfLife } from '@fortawesome/free-solid-svg-icons'

React内でfontawesomeを使用する方法

次に実際にReact内でfontawesomeを使用する方法ですが、下記のように変数に入れて使用しています。

const starfull = <FontAwesomeIcon icon="star" >;
const star0 = <FontAwesomeIcon icon={['far', 'star']} >;
const starhalf = <FontAwesomeIcon icon="star-half-alt" >;

ここで注意したいのが、記述方法です。

SVGが書かれているjsファイル名を開いて、例えばfaStarだった場合はfaStar.jsを開いて、prefixとiconNameの箇所に注目します。

var prefix = 'fas';
var iconName = 'star';

<FontAwesomeIcon icon="iconNameを記述する" >

上記のicon=””にfaStar.jsファイル内に書かれているiconNameを記述します。

使用したいSVGによってprefixが異なる

solidとbrandsとregularをインストールした場合、prefixの指定が必要になります。

prefixを記述しない場合は、デフォルトで【fas】となるようですが、使用したいSVGがregularやbrandsのフォルダに格納されている場合は、もう少し詳しく書かなければなりません。

下記のように【prefix】と【iconName】を書くことになります。

const starfull = <FontAwesomeIcon icon="{['fas', 'star']}" >;

例えば、星の枠だけのSVGを使いたい場合は、free-regular-svg-iconsフォルダ内のfaStar.jsになるので、faStar.jsのファイル内を【prefix】と【iconName】の部分を見ると、

var prefix = 'far';
var iconName = 'star';

とあります。
free-regular-svg-iconsフォルダ内のSVGを使う場合は、prefixの部分をfarと記述します。

const star0 = <FontAwesomeIcon icon={['far', 'star']} >;