FontAwesomeをGatsbyJSで使う方法

ウェブの海

著者モジュールを作る一部分。

Font Awesomeで企業などのブランドアイコンを使いたい

ソーシャルのリストを作りたかったのです。
Twitter、とか文字で書くよりはアイコンを表示させた方がよろしいかと思い、方法を調べてみました。

3つじゃなくて4つインストールでした

参照:GatsbyでFont Awesomeを使いたい – Qiita
企業アイコンを使う場合、こちらのインストールも必要でした。

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

上記実行しなかったので、使用例のとおりに書いたら、「resolveがないんだけど??」とエラーが出ました。

使用例

import React from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faTwitter, faCodepen, faTelegramPlane } from "@fortawesome/free-brands-svg-icons"

class Page extends React.Component {
  render(){
    return (
      <div className="social">
        <ul className="socialList">
          <li><a href="#" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={ faTwitter } className="socialList_icon" /></a></li>
          <li><a href="#" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={ faCodepen } className="socialList_icon" /></a></li>
          <li><a href="#" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={ faTelegramPlane } className="socialList_icon" /></a></li>
        </ul>
      </div>
    )
  }
}

まだReactの文法もおぼつかないので、勉強してログとして残していきたいと思います。

relでふたつ呼んでるのは、これつけないと別窓指定する時エラーになるからです。
ログって見るものですね……。

タイトルとURLをコピーしました