More than 5 years have passed since last update.

【React,FontAwesome】react-fontawesome(Solid Style)で指定するiconの名前の指定方法

Posted at 2020-01-06

この記事を書いた経緯

公式サイト(英語)を見ている時、使いたいアイコン名の指定の仕方に戸惑ったため、こちらの記事ではアイコン名の指定方法に絞って記載します。
本記事ではSolid Styleに関してのみ記載します。

なお、react-fontawesomeのインポートや使用方法については他の日本語サイト等に詳しく記載されておりますので、そちらを参考にしてください。

使用したいアイコン名の確認

こちらのサイトで使いたいアイコンを探し、クリックします。
アイコンの左上に大きく記載されている名前がアイコン名です。

例

URL: https://fontawesome.com/icons/check-square?style=solid

使用したいアイコン名の指定方法

`@fortawesome/free-solid-svg-icons`からのimport時

App.js

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

//FontAwesomeのアイコン名が「check-square」、「coffee」のアイコンを読み込んでいる
library.add(faCheckSquare, faCoffee)

※参照URL： npm @fortawesome/react-fontawesome(英語)

上記のように@fortawesome/free-solid-svg-iconsから使いたいアイコン名のオブジェクトを取得するときは、使いたいアイコン名をキャメルケースに書き換え、先頭にfaをつけます。

`<FontAwesomeIcon>`タグの`icon`属性指定時

CoffeeMark.js

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
export const CoffeeMark = () => (
  <div>
    <FontAwesomeIcon icon="check-square" />
    Favorite beverage: <FontAwesomeIcon icon="coffee" />
  </div>
)