Reactにおけるフォンテソンアイコンの正しい統合：CDNおよびNPMパッケージの選択と実践

この記事は、FontawesomeアイコンがReactアプリケーションに表示されない問題を解決することを目的としています。コアは、Fontawesomeの2つの主要な統合方法、CDNの導入とNPMパッケージの導入（@Fortawesome/React -Fontawesome）の導入を明確にし、混合使用の回避を強調することです。チュートリアルでは、プロジェクトのニーズに応じてこれらのメソッドのいずれかを選択および練習する方法、サンプルコードの提供、アイコンが適切に表示され、不必要なエラーを回避する方法に関する詳細な指示を提供します。

フォンテソンアイコンを統合することは、React開発における一般的な要件です。ただし、開発者は、表示されていないアイコンやコンソールエラーなどの問題に遭遇する場合があります。これは、通常、誤解やフォンテーション統合の混合使用に起因します。 Fontawesomeは、2つの主な統合方法を提供します。CDNを介したスクリプトのインポートと、NPMパッケージ（ @Fortawesome/React-Fontawesomeなど）をReactコンポーネントとして使用します。 2つの方法の違いを理解し、正しい方法を選択することが重要です。

Fontawesome統合方法の分析

1. Fontawesome CDNキットを使用します

これは、特に迅速なプロトタイプ開発やパッケージボリュームに敏感ではない簡単なプロジェクトのために、最も簡単で最速の方法です。 fontawesomeをCDNから導入すると、NPMパッケージをインストールする必要はありません。HTMLファイルの

またはタグ内にスクリプトリンクを追加する必要はありません。

統合ステップ：

1. CDNスクリプトを紹介する： public/index.html（または同様の）ファイルで、fontawesomeキットのCDNリンクを追加します。このリンクは通常、Fontawesomeの公式Webサイトから取得され、各ユーザーには一意のキットIDがあります。

    
   
   
     
       <meta charset="utf-8">
       <link rel="icon" href="%EF%BC%85public_url%EF%BC%85%20/favicon.ico">
       <meta name="Viewport" content="width = device-width、initial-scale = 1">
       <meta name="themain-color" content="＃000000">
       <title> React App </title>
       
       /script>
     
     
       <noscript> JavaScriptがこのアプリを実行できるようにする必要があります。</noscript>
       <div id="root"> </div>
     
   

2. Reactコンポーネントでタグを使用します。CDNスクリプトが読み込まれたら、タグを使用して、通常のHTMLタグを使用するのと同じようにReactコンポーネントにFontawesomeアイコンを表示できます。アイコンのスタイルは、CSSクラス名（FA-Regular-Regular Fa-Magnifice-Glassなど）で定義されます。

    // searchbar.jsx
   「プロップタイプ」からプロパティをインポートします。
   
   const searchbar =（{handlechange}）=> {
     戻る （
       <div classname="field">
         {/* <i>タグとfontawesome cssクラスを直接使用*/}
         <i classname="fa-regulary fa-magnifice-glass"> </i>
         
       </i>
   </div>
     ）;
   };
   
   searchbar.proptypes = {
     Handlechange：proptypes.func.isrequired、
   };
   
   デフォルトの検索バーをエクスポートします。

   注： CDNを使用する場合、 @Fortawesome/React-Fontawesomeパッケージはまったく不要です。それを導入すると、競合につながるか、プロジェクトの依存関係が増加する可能性があります。

2。 @Fortawesome/React-Fontawesome NPMパッケージを使用します

このアプローチは、大規模なプロジェクトがパッケージのボリュームを減らすためにツリーを駆使する必要がある、または高度なアイコン制御（回転、スタッキングなど）が必要なシナリオにより適しています。反応コンポーネントとしてfontouseアイコンを提供し、アイコン管理をよりモジュール化し、反応指向にします。

統合ステップ：

1. 必要なNPMパッケージをインストールします。

    npmインストール-save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/React-fontawesome
   ＃通常やブランドなどの他のアイコンセットが必要な場合は、npmを個別にインストールします-save @fortawesome/free-relument-svg-icons @fortawesome/free-brands-svg-icons

2. Reactコンポーネントでのインポートと使用：

   • @fortawesome/fontawesome-svg-coreからライブラリをインポートします。
   • @Fortawesome/Free-Solid-SVG-Icons（またはその他のアイコンセット）から必要な特定のアイコンをインポートします。
   • インポートされたアイコンをライブラリに追加して、コンポーネントでアクセスできるようにします。
   • @fortawesome/React-fontawesomeからfontawesomeiconコンポーネントをインポートします。

    // app.jsまたは '@fortawesome/fontawesome-svg-core'からの初期化ファイルインポート{library};
   '@fortawesome/free-relument-svg-icons'から{famagnificeglass}をインポートします。 //通常のアイコンをインポート//ライブラリにアイコンをライブラリに追加して、library.add（famagnifyedglass）を使用します。

    // searchbar.jsx
   「プロップタイプ」からプロパティをインポートします。
   「@fortawesome/race-fontawesome」から{fontawesomeicon}をインポートします。 //反応コンポーネントconst searchbar =（{handlechange}）=> {
     戻る （
       <div classname="field">
         {/* fontawesomeiconコンポーネントを使用してアイコン名を渡す*/}
         <fontawesomeicon icon="fa-relument fa-magnifice-glass"></fontawesomeicon> {/*文字列はここに渡されますが、アイコンオブジェクトに渡すことをお勧めします*/}
         {/*推奨される方法：アイコンオブジェクトに渡す*/}
         {/ * <fontawesomeicon icon='{["far"、'></fontawesomeicon> */}
         
       </div>
     ）;
   };
   
   searchbar.proptypes = {
     Handlechange：proptypes.func.isrequired、
   };
   
   デフォルトの検索バーをエクスポートします。

   重要： NPMパッケージメソッドを使用する場合、競合や不必要なリソースの負荷を回避するために、public/index.htmlで導入されたfontawesome CDNスクリプトを削除してください。

コアの競合とソリューション

問題のルートは、fontawesomeのCDN導入方法と @fortawesome/React-fontawesomenpmパッケージが同時に使用されていることです。これらの2つの方法は、内部メカニズムの観点から独立しています。 CDNメソッドは、グローバルCSSとJavaScriptに依存してタグをレンダリングし、NPMパッケージメソッドはSVGアイコンをReactコンポーネントを介してDOMに直接埋め込みます。両方が同時に存在する場合、それは次の結果になる可能性があります。

1. 繰り返し読み込みます：ブラウザは2セットのfontawesomeリソースをロードします。
2. スタイルの競合：さまざまな負荷メカニズムが、スタイルやレンダリングロジックの競合を引き起こす可能性があります。
3. コンソールエラー：特に、FontawesomeIconコンポーネントが内部ライブラリで見つからないアイコンをレンダリングしようとした場合、CDNがタグのレンダリングを引き継いだ場合、予期しない動作が発生します。

解決：

プロジェクトのニーズに基づいて、統合方法の1つのみを選択して選択します。

• CDNメソッドを選択した場合：
  • fontawesome CDNキットがindex.htmlで正しく導入されていることを確認してください。
  • 標準 Reactコンポーネントで使用します。
  • @fortawesome/React-fontawesomeに関連するNPMパッケージをアンインストールします。
• NPMパッケージメソッドを選択した場合：
  • index.htmlのすべてのfontesome cdnスクリプトを削除します。
  • 必要なすべての @fortawesome/*npmパッケージがインストールされていることを確認してください。
  • （または推奨されるicon = {["far"、 "magnifyed-glass"]}）コンポーネントを使用します。
  • 必要なアイコンをライブラリに追加したことを確認してください。

要約します

ReactアプリケーションにFontawesomeアイコンを統合する場合、重要なのは単一の統合戦略を理解して選択することです。グローバルに導入し、CDNを介してHTML タグを使用するか、NPMパッケージを介してReactコンポーネントとして使用します。これらの2つの方法を混合することは、アイコンが表示されず、コンソールエラーが報告されない一般的な理由です。この記事で提供されているガイダンスに従うことにより、FontawesomeアイコンがReactプロジェクトに正しく効率的に表示されるようにすることができます。

以上がReactにおけるフォンテソンアイコンの正しい統合：CDNおよびNPMパッケージの選択と実践の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。