TIL 82 l reactの画像を挿入し、FontAwsomeを適用する
JSで作成したhtml、cssファイルをreactにインポートしてレンダリングする過程で、画像とFontAwsomeアイコンがポップアップされたことを体験したことがありますか...エラー解決プロセスを共有します.
画像をPublicフォルダに挿入し、画像ラベルにパスをロードすることで画像を挿入します.
reactでJavaScriptで作成した画像タグを使用するとexparkとして出力されます.だから上のように、反応に合った文法で書きます.
(よく使われる3つの無料カテゴリしか書いていません.挿入したいアイコンが他のカテゴリに属する場合は、npmコマンドをチェックしてインストールする必要があります.)
Regular
npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons
Solid
npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons
Brand
npm i -S @fortawesome/free-brands-svg-icons
複数のカテゴリをダウンロードする場合、@ベースのコマンドを一度にインストールします.
package.json>dependenciesに'@fortawemes/'がインストールされていることがわかります.
アイコンを適用したい構成部品ファイルの上部に、次のコードを挿入します.
最初の行のコードは、react-fontawesomeをインポートするコードです.
2行目のコードは、必要なアイコンをインポートするコードです.{faSearch}セクションはfontAwesomeのホームページに入り、アイコン名を確認し、アイコンを入力します.
react>Jsフォルダイメージを挿入するには:
画像をPublicフォルダに挿入し、画像ラベルにパスをロードすることで画像を挿入します.
1.公衆に画像フォルダを作成する
2.次にsrcで動作する場所で画像をロードするときにパスを追加します。
reactでJavaScriptで作成した画像タグを使用するとexparkとして出力されます.だから上のように、反応に合った文法で書きます.
react>FontAwsomeの適用方法
1.font-awesome npmインストール
npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome
インストール2.font-awesomeカテゴリ
(よく使われる3つの無料カテゴリしか書いていません.挿入したいアイコンが他のカテゴリに属する場合は、npmコマンドをチェックしてインストールする必要があります.)
Regular
npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons
Solid
npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons
Brand
npm i -S @fortawesome/free-brands-svg-icons
npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
3.インストールの確認
package.json>dependenciesに'@fortawemes/'がインストールされていることがわかります.
4.処理中のファイルへの接続
最初の行のコードは、react-fontawesomeをインポートするコードです.
2行目のコードは、必要なアイコンをインポートするコードです.{faSearch}セクションはfontAwesomeのホームページに入り、アイコン名を確認し、アイコンを入力します.
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
最後にreact jsファイルのhtmlコードを変更します.iラベルは使用されません.iタグでロードし、挿入位置に次のコードを入れる.<FontAwesomeIcon icon={faSearch} className="search" />
Reference
この問題について(TIL 82 l reactの画像を挿入し、FontAwsomeを適用する), 我々は、より多くの情報をここで見つけました https://velog.io/@yeonbee/TIL-82-l-React에서-FontAwsome-사용하는-방법テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol