ReactでFontAwesome5を使用する

このシリーズのパート1では、reactstrapのデモを行い、簡単なフォームをすばやく効率的に作成しました。今回の記事では、 Font Awesome 5 を使用してSVGアイコンを追加し、フォームをさらに魅力的にします。

注： Font Awesome 5.1は、コードベースの完全な書き直しを含む大幅な改善を歓迎しました。バージョン4を使用している場合は、アップグレード手順に従って一貫性を確保してください。

シリーズ

パート1：ReactStrapとReactのファンシーフォーム🎩
パート2：ReactでのFontAwesome5の使用🦄

インストール

パート1で中断したところから再開しましょう。 🐊.ioの感触を得るために、CSSを自由に追加しました。

まず、react-fontawesomeをSVGライブラリfontawesome-svg-coreおよびfontawesome-svg-iconsと一緒にインストールします。インストールするパッケージには、無料バージョンのみが含まれています。新しいプロのアイコンとスタイルを利用したい場合は、Githubリポジトリで追加のインストールと構成の手順を確認してください。

npmまたはYarnを介して必要なものをインストールする方法は次のとおりです。

$ npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

# or, using Yarn:
$ yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

実装

インストールが完了したので、すぐにこれらの悪い男の子を実装します。

FAアイコンを使用する方法は複数ありますが、アプリ全体ですべてのアイコンに簡単にアクセスできるライブラリの構築に焦点を当てます。

App.jsファイルで、必要なアイコンをインポートします。

この例では、エンベロープアイコンとキーアイコンを使用します。すべてのアイコンは、FontAwesomeのアイコンライブラリにあります。すべてのアイコンのインポートは、すべてのダッシュを省略して、開始時にfaを使用してキャメルケースに変換されます。たとえば、キーアイコンはfaKeyとしてインポートされます。まず、必要なファイルをインポートし、fontawesome-svg-coreの'library.addを呼び出してアイコンをプルします。

App.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { faEnvelope, faKey } from '@fortawesome/free-solid-svg-icons';

library.add(faEnvelope, faKey);

// ...

プロジェクトが成長するにつれて、App.jsのライブラリにアイコンをインポートして追加するだけで済みます。これらのアイコンを使用する必要があるSignUp.jsというコンポーネントがあるとします。それらはすでにApp.jsのライブラリに追加されているので、**コンポーネントのインポートを以下に追加するだけです。

SignUp.js

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

/// ...

次に、ユーザー名ラベルの一部として、FontAwesomeIconコンポーネントを使用します。

SignUp.js

// ...

<Label>
  <FontAwesomeIcon
    icon="envelope"
  />
  Username
</Label>

提供されたアイコン名は、インポートされたときと同じように書かれていないことに注意してください。アイコン名を小道具としてFontAwesomeIconコンポーネントに渡す場合、必要なのはアイコンの小文字の名前のみです。追加のスタイリングのために、classNameも追加しました。次に、すすぎ、keyアイコンを繰り返します。結果は次のようになります。

私たちのアイコンとテキストは少し押しつぶされており、あえて言うと退屈なので、アイコンとラベルテキストの間にスペースを追加し、アイコンの色とサイズを変更しましょう。

SignUp.js

// ...

<label>
  <FontAwesomeIcon
    icon="envelope"
    color="#6DB65B"
    size="sm"
  />
  {' '}Username
</label>

ご覧のとおり、 FontAwesomeIcon コンポーネントは、アイコンのスタイルを変更するためにいくつかの異なる小道具を使用できます。ここでは、colorとsizeの小道具を使用しました。 sizeプロップは、 xs 、 lg 、 2x 、3xのような文字列値を想定しています…かなりの数があります渡すことができるより多くの小道具。特に、spinおよびpulseブール小道具では、アイコンがそれ自体で回転します。

それだけです！その素敵なUIを見てください。

TLDR

reactstrap + react-fontawesome=1人の幸せな開発者🚀

ReactでFontAwesome5を使用する

目次

シリーズ

新着情報？

インストール

実装

TLDR