How To Use Font Awesome 5 with React

投稿日: 2022-04-20 2022-04-20
タグ: javascript, React

序章

Font Awesome は、アイコンとソーシャルロゴを提供するWebサイト用のツールキットです。 React は、ユーザーインターフェイスの作成に使用されるコーディングライブラリです。 FontAwesomeチームは統合を促進するためにReactコンポーネントを作成しましたが、FontAwesome5とその構造について理解するための基本事項がいくつかあります。このチュートリアルでは、ReactFontAwesomeコンポーネントの使用方法について説明します。

Font Awesome website with its icons

前提条件

このチュートリアルではコーディングは必要ありませんが、いくつかの例を試すことに興味がある場合は、次のものが必要になります。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
Reactアプリの作成。これは、Reactプロジェクトのセットアップ方法に従って実行できます。

ステップ1—FontAwesomeを使用する

Font Awesomeチームは、 Reactコンポーネントを作成したので、2つを一緒に使用できます。このライブラリを使用すると、アイコンを選択した後、チュートリアルに従うことができます。

この例では、homeアイコンを使用して、App.jsファイルのすべてを実行します。

src / App.js

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

これで、アプリに小さなホームアイコンが表示されます。このコードはhomeアイコンのみを選択するため、バンドルサイズに追加されるアイコンは1つだけです。

code sandbox with home icon showing

これで、Font Awesomeは、このコンポーネントがマウントされると、このコンポーネントがそのアイコンのSVGバージョンに置き換えられることを確認します。

ステップ2—アイコンの選択

アイコンをインストールして使用する前に、FontAwesomeライブラリがどのように構成されているかを知ることが重要です。アイコンがたくさんあるので、チームはそれらを複数のパッケージに分割することにしました。

必要なアイコンを選択するときは、FontAwesomeアイコンページにアクセスしてオプションを確認することをお勧めします。ページの左側に沿って選択できるさまざまなフィルターが表示されます。これらのフィルターは、アイコンのインポート元のパッケージを示すため、非常に重要です。

上記の例では、homeアイコンを@fortawesome/free-solid-svg-iconsパッケージから引き出しました。

アイコンが属するパッケージの決定

左側のフィルターを確認すると、アイコンがどのパッケージに属しているかを確認できます。アイコンをクリックして、それが属するパッケージを表示することもできます。

フォントがどのパッケージに属しているかがわかったら、そのパッケージの3文字の省略形を覚えておくことが重要です。

ソリッドスタイル-fas
レギュラースタイル-far
ライトスタイル-fal
デュオトーンスタイル-fad

アイコンページから特定のタイプを検索できます。

icon page with some of the package names on the left

特定のパッケージのアイコンを使用する

Font Awesomeアイコンページを閲覧すると、通常、同じアイコンの複数のバージョンがあることに気付くでしょう。たとえば、boxing-gloveアイコンを見てみましょう。

boxing glove icon three different versions

特定のアイコンを使用するには、<FontAwesomeIcon>を調整する必要があります。以下は、異なるパッケージの同じアイコンの複数のタイプです。これらには、前述の3文字の速記が含まれます。

注：次の例は、いくつかのセクションでアイコンライブラリを構築するまで機能しません。

ソリッドバージョンの例を次に示します。

<FontAwesomeIcon icon={['fas', 'code']} />

タイプが指定されていない場合、これはデフォルトでソリッドバージョンになります。

<FontAwesomeIcon icon={faCode} />

そして、falを使用したライトバージョン：

<FontAwesomeIcon icon={['fal', 'code']} />;

iconプロップを、単純な文字列ではなく配列に切り替える必要がありました。

ステップ3—FontAwesomeをインストールする

アイコンには複数のバージョン、複数のパッケージ、無料/プロパッケージがあるため、それらすべてをインストールするには、複数のnpmパッケージが必要です。複数をインストールしてから、必要なアイコンを選択する必要がある場合があります。

この記事では、複数のパッケージをインストールする方法を示すことができるように、すべてをインストールします。

次のコマンドを実行して、基本パッケージをインストールします。

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

次のコマンドを実行して、通常のアイコンをインストールします。

# regular icons
npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons

これらは、実線のアイコンをインストールします。

# solid icons
npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons

ライトアイコンには、次のコマンドを使用します。

# light icons
npm i -S @fortawesome/pro-light-svg-icons

これにより、デュオトーンアイコンがインストールされます。

# duotone icons
npm i -S @fortawesome/pro-duotone-svg-icons

最後に、これによりブランドアイコンがインストールされます。

# brand icons
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

Font Awesomeのプロアカウントをお持ちの場合は、以下を使用してすべてのアイコンをインストールできます。

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

パッケージをインストールしましたが、まだアプリケーションで使用していないか、アプリバンドルに追加していません。次のステップでそれを行う方法を見てみましょう。

ステップ4—アイコンライブラリを作成する

必要なアイコンを複数のファイルにインポートするのは面倒な場合があります。 Twitterのロゴを複数の場所で使用しているとしましょう。これを何度も書く必要はありません。

すべてを1つの場所にインポートするために、各アイコンを個別のファイルにインポートする代わりに、FontAwesomeライブラリを作成します。

srcフォルダにfontawesome.jsを作成し、それをindex.jsにインポートしてみましょう。アイコンを使用するコンポーネント（子コンポーネント）がアクセスできる限り、このファイルを自由に追加してください。 index.jsまたはApp.jsでこれを行うこともできます。ただし、これは大きくなる可能性があるため、別のファイルに移動する方がよい場合があります。

src / fontawesome.js

// import the library
import { library } from '@fortawesome/fontawesome-svg-core';

// import your icons
import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';

library.add(
  faMoneyBill,
  faCode,
  faHighlighter
  // more icons go here
);

独自のファイルでこれを行った場合は、index.jsにインポートする必要があります。

src / index.js

import React from 'react';
import { render } from 'react-dom';

// import your fontawesome library
import './fontawesome';

render(<App />, document.getElementById('root'));

アイコンパッケージ全体のインポート

すべてのアイコンをアプリにインポートするため、バンドルサイズが大きくなる可能性があるため、パッケージ全体をインポートすることはお勧めしません。パッケージ全体を重要視する必要がある場合は、確かにそうすることができます。

この例では、@fortawesome/free-brands-svg-iconsのすべてのブランドアイコンが必要だとします。パッケージ全体をインポートするには、以下を使用します。

src / fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

fabは、ブランドアイコンパッケージ全体を表します。

アイコンを個別にインポートする

Font Awesomeアイコンを使用するための推奨される方法は、必要なものだけをインポートするため、最終的なバンドルサイズができるだけ小さくなるように、アイコンを1つずつインポートすることです。

次のように、さまざまなパッケージの複数のアイコンからライブラリを作成できます。

src / fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';

import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
import { faImages } from '@fortawesome/pro-solid-svg-icons';
import {
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
} from '@fortawesome/free-brands-svg-icons';

library.add(
  faUserGraduate,
  faImages,
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
);

複数のスタイルから同じアイコンをインポートする

fal、far、およびfasパッケージのすべてのタイプのboxing-gloveが必要な場合は、それらをすべて別の名前でインポートしてから追加できます。彼ら。

src / fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import {
  faBoxingGlove as faBoxingGloveRegular
} from '@fortawesome/pro-regular-svg-icons';
import {
  faBoxingGlove as faBoxingGloveSolid
} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faBoxingGlove,
    faBoxingGloveRegular,
    faBoxingGloveSolid
);

次に、さまざまなプレフィックスを実装することでそれらを使用できます。

<FontAwesomeIcon icon={['fal', 'boxing-glove']} />
<FontAwesomeIcon icon={['far', 'boxing-glove']} />
<FontAwesomeIcon icon={['fas', 'boxing-glove']} />

ステップ5—アイコンの使用

必要なものをインストールし、Font Awesomeライブラリにアイコンを追加したので、アイコンを使用してサイズを割り当てる準備ができました。このチュートリアルでは、light（fal）パッケージを使用します。

この最初の例では、通常のサイズを使用します。

<FontAwesomeIcon icon={['fal', 'code']} />

2番目の例では、という名前のサイジングを使用できます。これは、小（sm）、中（md）、大（lg）、および追加の略語を使用します。 -大きい（xl）：

<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />

3番目のオプションは、6までの番号付きサイズを使用することです。

<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />

番号付きサイズを使用する場合は、小数を使用して最適なサイズを見つけることもできます。

<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />

Font Awesomeは、CSSのテキストの色を使用して、使用するSVGのスタイルを設定します。このアイコンが配置される場所に<p>タグを配置すると、段落の色はアイコンの色になります。

<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />

Font Awesomeには、 power transforms 機能もあり、さまざまな変換をつなぎ合わせることができます。

<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />

FontAwesomeサイトにあるトランスフォームのいずれかを使用できます。これを使用して、アイコンを上下左右に移動し、テキストの横またはボタンの内側に完全に配置することができます。

固定幅アイコン

すべて同じ幅で均一である必要がある場所でアイコンを使用する場合、FontAwesomeではfixedWidthプロップを使用できます。たとえば、ナビゲーションドロップダウンに固定幅が必要だとします。

Scotch website with menu dropdown and "Courses" highlighted

<FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />

回転するアイコン

スピニングは、フォームの処理中にフォームボタンに実装するのに便利です。スピナーアイコンを使用して、優れた読み込み効果を作成できます。

<FontAwesomeIcon icon={['fal', 'spinner']} spin />

spinプロップは何にでも使えます！

<FontAwesomeIcon icon={['fal', 'code']} spin />

高度：アイコンのマスキング

Font Awesomeを使用すると、2つのアイコンを組み合わせて、マスキングでエフェクトを作成できます。通常のアイコンを定義してから、maskプロップを使用して、上に配置する2番目のアイコンを定義します。最初のアイコンは、マスキングアイコン内に拘束されます。

この例では、マスキングを使用してタグフィルターを作成しました。

Tag filters with Font Awesome

<FontAwesomeIcon
  icon={['fab', 'javascript']}
  mask={['fas', 'circle']}
  transform="grow-7 left-1.5 up-2.2"
  fixedWidth
/>

複数のtransformプロップをチェーンして、マスキングアイコンの内側に収まるように内側のアイコンを移動する方法に注目してください。

Font Awesomeを使用して、背景のロゴを色付けして変更することもできます。

The Tag filters again, but now with a blue background

ステップ6—`react-fontawesome`とReact以外のアイコンの使用

サイト全体がシングルページアプリケーション（SPA）ではなく、代わりに従来のサイトがあり、がにReactを追加した場合。メインのSVG/JSライブラリとreact-fontawesomeライブラリのインポートを回避するために、Font Awesomeは、Reactライブラリを使用してReactコンポーネントの外部のアイコンを監視する方法を作成しました。

<i class="fas fa-stroopwafel"></i>をお持ちの場合は、Font Awesomeに、以下を使用してそれらを監視および更新するように指示できます。

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver

MutationObserver は、DOMの変更をパフォーマンス的に監視できるようにするWebテクノロジーです。この手法の詳細については、 ReactFontAwesomeドキュメントをご覧ください。

結論

Font AwesomeとReactを一緒に使用することは素晴らしい組み合わせですが、複数のパッケージを使用し、さまざまな組み合わせを検討する必要があります。このチュートリアルでは、FontAwesomeとReactを一緒に使用する方法のいくつかを探りました。

getdocs

13036

序章

前提条件

ステップ1—FontAwesomeを使用する

ステップ2—アイコンの選択

アイコンが属するパッケージの決定

特定のパッケージのアイコンを使用する

ステップ3—FontAwesomeをインストールする

ステップ4—アイコンライブラリを作成する

アイコンパッケージ全体のインポート

アイコンを個別にインポートする

複数のスタイルから同じアイコンをインポートする

ステップ5—アイコンの使用

固定幅アイコン

回転するアイコン

高度：アイコンのマスキング

ステップ6—react-fontawesomeとReact以外のアイコンの使用

結論

getdocs

ステップ6—`react-fontawesome`とReact以外のアイコンの使用