React アプリケーションで FontAwesome アイコンを使用する

気づかないかもしれませんが、アイコンとロゴは現代のアプリケーションの重要な部分です。React でインターフェースを構築する際、開発者はアイコンを含むさまざまなツールキットやパッケージを使用できます。FontAwesome は、さまざまなアイコンを提供するため、最良のオプションの 1つです。FontAwesome の背後にあるチームも、アイコンを React エコシステムに統合するための努力をしました。

React での FontAwesome の使用

React の FontAwesome アイコンを選ぶ

アプリケーションに必要なアイコンの種類を決定したら、Font Awesome Iconsページで関連キーワードを検索して、適切なものを見つけることができます。左側に表示されるフィルターは、オプションを絞り込むために不可欠です。彼らはあなたが探しているものを正確に見つけるのを助け、そしてもっと重要なことに、あなたがインストールする必要がある FontAwesome パッケージを教えてくれます。

通常のアイコンをインストールするには、コマンドラインで次のコマンドを実行します。

npm install --save @fortawesome/free-regular-svg-icons

インストールできるさまざまなパッケージをすべて調べるには、このガイドを参照してください。

ライブラリの作成

アプリケーションが大きくなるにつれて、さまざまなファイルにアイコンが必要になります。同じアイコンを何度もインポートすると、疲れ果ててしまう可能性があります。代わりに、必要なすべてのアイコンを 1つの JavaScript ファイルにインポートして、FA ライブラリを作成できます。

アイコンライブラリは src フォルダに保存するのが通例です。ライブラリには、React アプリケーション全体で使用されるすべてのアイコンが含まれている必要があります。完了したら、ライブラリを親コンポーネント（通常は App.js）にインポートして、すべての子がライブラリにアクセスできるようにします。

単純なアイコンライブラリは次のようになります。

import {library} from '@fortawesome/fontawesome-svg-core';
// import the necessary icons
import {faCheckSquare, faCoffee} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faCoffee,
    faCheckSquare,
);

<FontAwesomeIcon/> を使用する

react-fontawesome パッケージには、React アプリケーションで FA アイコンを使用するために明示的に作成された <FontAwesomeIcon /> カスタムコンポーネントが含まれています。個別のコンポーネントアプローチにより、パフォーマンスが向上し、バンドル全体のサイズを最小限に抑えることができます。

<FontAwesomeIcon/> コンポーネントを使用するには、react-fontawesome パッケージをインストールする必要があります。また、特定のアイコンをインポートする必要があります。たとえば、Twitter のロゴを使用する場合は、faTwitter アイコンをインポートする必要があります。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';

class App extends Component {
  render() {
    return <FontAwesomeIcon icon={ faTwitter }/>
  }
}

icon 属性​​が最も重要ですが、他の属性がアイコンのカスタマイズに役立ちます。

size 属性は多くの異なる値を受け入れます-小さい場合は sm、中程度の場合は md、大きい場合は lg、特大の場合は xl です。また、数値を受け入れるため、アイコンを標準サイズに合わせて拡大縮小できます。2x と 6x の値の間の数値を使用して、それに応じてアイコンを拡大できます。10 進値を使用することもできます。インラインスタイルを使用して、<FontAwesomeIcon /> コンポーネントの外観を変更することもできます。

className を使用する

create-react-app CLI を使用して React アプリケーションを開発している場合は、className 属性を使用してアイコンを表示できます。他のフレームワークまたは言語を使用している場合、これは FontAwesome の使用に慣れている方法である可能性があります。

JSX 構文では、通常の DOM と同様に、className 属性を使用する必要があることを忘れないでください。JavaScript の class は予約語であるため、これが必要です。

font-awesome ライブラリをインストールしたら、それを index.js ファイルにインポートする必要があります。ファイルには次のものが含まれている必要があります。

import 'font-awesome/css/font-awesome.min.css';

アイコンスタイルをインポートすると、JSX で通常の className 構文を使用できます。

 render: function() {
    return <span><i className="fa fa-address-card fa-amazon">Icon</i></span>;
}