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

4918 ワード
React react-fontawesome FontAwesome FontAwesome テキストリンク

この記事を書いた経緯

公式サイト(英語)を見ている時、使いたいアイコン名の指定の仕方に戸惑ったため、こちらの記事ではアイコン名の指定方法に絞って記載します。
本記事では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>
)

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

<FontAwesomeIcon>タグのicon=""を指定するときは、アイコン名をそのまま指定します。

　参照URL

公式サイト | npm @fortawesome/react-fontawesome(英語)
公式サイト | アイコン例　check-square(英語)