[解決済み] 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" です。
そして、フィルタリングされたリンクから、どのアイコンがどのパッケージに属しているかを見つけることができるはずです。
関連
-
[解決済み] エラー: 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み] MUI Boxは何のためのコンポーネントですか?
-
[解決済み] TypeError: reactjs の未定義のプロパティ 'status' を読み取ることができません。
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題
-
[解決済み] アクシオスは定義されていません
-
[解決済み] react-navigation v5を使ったreact-nativeアプリのAppNavigatorの構文を更新する。
-
[解決済み] componentWillReceivePropsライフサイクルメソッドはいつ使用するのですか?
-
[解決済み] create-react-appビルドスクリプトを実行する際に、ビルド.env変数を設定するには?
-
[解決済み] React JSXのforEach()でHTMLが出力されない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】<Router>の外側で<Link>を使用してはならない
-
[解決済み】Reactを使用したMapBoxのCSSが欠落している件
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み] React テキストを挟んだ横長の仕切りを作る
-
[解決済み] Webpack + Babelです。プリセット "es2015 "がディレクトリに相対して見つからなかった
-
[解決済み] MUI Boxは何のためのコンポーネントですか?
-
[解決済み] react nativeで関数だらけのヘルパーファイルを作成する方法は?
-
[解決済み] componentWillReceiveProps は名称が変更されました。
-
[解決済み] validateDOMNesting警告React
-
[解決済み] React Router - バージョン更新後のwithRouterでTypescriptエラーが発生する。