Gatsby.jsにて【Font Awesome】を使用する方法

Gatsby.jsにて【Font Awesome】を使用する方法です。

まずは、Font Awesome を導入する

yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/react-fontawesome

nmp

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

使用したいFont Awesomeのアイコンをインストール

yarn

# solid
yarn add @fortawesome/free-solid-svg-icons

# regular
yarn add @fortawesome/free-regular-svg-icons

# brand
yarn add @fortawesome/free-brands-svg-icons

npm

# solid
npm install @fortawesome/free-solid-svg-icons

# regular
npm install @fortawesome/free-regular-svg-icons

# brand
npm install @fortawesome/free-brands-svg-icons

これでFont Awesomeの導入は完了です。

Gatsby.jsにて【Font Awesome】を使用する

import React from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBars, faCalendar } from '@fortawesome/free-solid-svg-icons'
import { faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons'

export default () => {
  return (
    <div>
      <p>
        <FontAwesomeIcon icon={faBars} />
        <FontAwesomeIcon icon={faCalendar} />
        <FontAwesomeIcon icon={faTwitter} />
        <FontAwesomeIcon icon={faInstagram} />
      </p>
    </div>
  )
}

上記のように使用したいアイコンをimportして、使用することができます。