1. ホーム
  2. reactjs

[解決済み] FontAwesomeの無料パッケージに含まれているアイコンのオブジェクト名はどこにあるのですか?

2022-01-28 09:23:01

質問

フォントアウォーム は、アイコンのライブラリの集合体です。その中の 使用説明書 にあるコーヒーアイコンのオブジェクトをインポートすれば、コーヒーアイコンが使えることを例として書いている。 free-solid-svg-icons パッケージのようになります。

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
 
const element = <FontAwesomeIcon icon={faCoffee} />
 
ReactDOM.render(element, document.body)

を見てみると FontAwesome Coffee Icon ドキュメント コーヒーアイコンがどのパッケージに含まれているのか、またそのオブジェクト名は何なのかについての言及は見当たりません。サンプルコードから、そのオブジェクト名が faCoffee に含まれていること、そして @fortawesome/free-solid-svg-icons パッケージの場合はどうでしょうか。 その他の5,365個のアイコン ?

Q: FontAwesomeのアイコンが持つReactオブジェクト名と、それが含まれるReactパッケージは、どのように確認できますか?

解決方法は?

Font-Awesomeのパッケージは4つしかありません。

Name    | Free | Paid | Prefix | NPM Package (free)                  | NPM package (paid)
---------------------------------------------------------------------------------------------------------
Solid   | Yes  | Yes  | fas    | @fortawesome/free-solid-svg-icons   | @fortawesome/pro-solid-svg-icons
Regular | Yes  | Yes  | far    | @fortawesome/free-regular-svg-icons | @fortawesome/pro-regular-svg-icons
Light   | No   | Yes  | fal    |                                     | @fortawesome/pro-light-svg-icons
Brands  | Yes  | No   | fab    | @fortawesome/free-brands-svg-icons  | 

について サーチアイコンページ をクリックすると、パッケージでフィルタリングして、どのアイコンがどのパッケージに属しているかを知ることができます。 ソリッドパッケージでフィルタリングされたアイコンです。 .

とはいえ、投稿されたコードから、アイコンリストのプレフィックス "fa" を加えたアイコンの React 名を差し引くことができます。React のアイコン "Coffee" は "faCoffee" です。

そして、フィルタリングされたリンクから、どのアイコンがどのパッケージに属しているかを見つけることができるはずです。