このシリーズのパート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-corefontawesome-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‘s’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 コンポーネントは、アイコンのスタイルを変更するためにいくつかの異なる小道具を使用できます。 ここでは、 colorsize 小道具。 The size propは、 xs lg 2x 3xなどの文字列値を想定しています。の。 特に、 spinpulse ブール小道具は、アイコンがそれ自体で回転します。

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

TLDR

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