Gutenbergでブロックを作る時にfontawesomeを使う事があると思います。
調べてみると、Reactでfontawesomeを使う方法が載っていたので、折角なのでreact-fontawesomeを使ってみることにしました。
Contents
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-iconsreact-fontawesomeを使うにあたって参考にしたサイトがfontawesomeの公式サイトです。
日本語ではreact-fontawesomeを使ってみるが詳しいと思います。
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']} >;free-solid-svg-icons内のSVGを使いたい場合は、【prefixがfas】
free-regular-svg-icons内のSVGを使いたい場合は、【prefixがfar】
free-brands-svg-icons内のSVGを使いたい場合は、【prefixがfab】
