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

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

シリーズ

新着情報?

FAは、コードベース全体を書き直し、ユーザーに新しい機能を提供することで、バージョン5をすべて完成させました。

V5は、さまざまなアイコン(1000以上!)を追加し、旅行、絵文字😍、豪華なSVG形式のデザインを含むカテゴリパックも追加します。

過去にFontAwesomeを使用したことがある場合は、‘fa-profile’のようなものは見覚えがあるかもしれません。 V5では、FAはFontAwesomesolidの‘fas’、FontAwesomeLightの‘fal’、FontAwesomeBrandsの‘fab’などのアイコンスタイルを導入しました。 「far」はFontAwesomeRegularの場合、新しいアイコンは「farfa-profile」のように見える可能性があります。これにより、UI/UXデザインに大きな柔軟性が追加されます。

さらに、 React Angular Vue Ember 用のFAパッケージ(これから使用するものなど)があります。 。

この迅速で堅牢な開発に資金を提供するために、FAは Font Awesome Pro を導入しました。これにより、ユーザーは設計の柔軟性と機能性をさらに高めることができます。 あなたがV4の無料機能のファンなら、心配しないでください! V4のすべての機能は、バグ修正とアップデートを含む無料プランのままです。

完全なスクープについては、更新ページを確認してください。

インストール

パート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アイコンを繰り返します。 結果は次のようになります。

Form Feedback with Icon

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

SignUp.js
// ...

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

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

Colored Icons

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

TLDR

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