フォント素晴らしい5を使用して🏳️ 反応して

The Font Awesome 新しいバージョン5のSVGのアイコンを追加し、新しい機能を持つユーザーを提供するすべてのアウト行った🤩.
場合は、過去のフォントを素晴らしいと働いてきた場合、何かのようなfa-profile 身近に見えるかもしれない.フォント素晴らしいアイコンのスタイルを紹介fas フォント素晴らしいソリッドのために.fal フォントものすごい光のために、これはUI/UX設計のために多くの柔軟性を加えます.

また、フォントの素晴らしいパッケージがあります(我々が使用しようとしているように!)反応、角度、およびVue😮.

インストール

始めるには、インストールする予定ですreact-fontawesome 彼らのライブラリーに加えて.

// If you are using npm:
$ 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

我々はちょうど無料版が含まれて紹介しているパッケージ🆓. あなたは、新しい安っぽいProのアイコンとスタイルを利用するために探している場合は、それらを見てsite 追加のインストールとセットアップ

実装

これらの美しいアイコンを実装するために前進しましょう👌 我々のアプリ全体.
これらのシンボルを利用するための多くのアプローチがありますが、我々は楽々とすべてのシンボルを取得するライブラリを構築することに集中するつもりです.
ライブラリにアイコンを追加するコードは、アプリケーションのルートレベルで行うことができますApp.js . 必要なファイルをインポートして呼び出しますfontawesome-svg-core ’s library.add 私たちのアイコンを引く.

//App.js

import { library } from "@fortawesome/fontawesome-svg-core";
import { faCheckSquare, faMugHot } from "@fortawesome/free-solid-svg-icons";

library.add( faCheckSquare, faMugHot);

//...

All icons can be found in Font Awesome’s icon library.

我々は正常に必要なアイコンを追加しました.今私たちのコンポーネントでそれを実装する時間です👍.
私たちがコンポーネントを持っていると想像してくださいIcon.js . 彼らはすでに我々のライブラリに追加されているのでApp.js これをインポートするだけです.

// Icon.js

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

export const Drink = () => (
    <div className="App">
      <div>
       <FontAwesomeIcon icon="check-square" />
       Drink: <FontAwesomeIcon icon="mug-hot" />
      </div>
    </div>
)

加えることによってfaCheckSquare and faMugHot ライブラリには、私たちはアプリのアイコン文字列名を使用して全体を参照することができますてcheck-square and mug-hot (小文字で).

待ち🤔, 私たちのアイコンとテキストは少しぼやけていると思うし、私は、退屈なので、アイコンとテキストの間にスペースを追加し、アイコンの色とサイズを変更しましょうと言うにはベンチャーかもしれない:

<FontAwesomeIcon icon="check-square" />{' '}
Drink: <FontAwesomeIcon icon="mug-hot" color="pink" size="2x" />

ご覧のように、FontaWesomeIconコンポーネントは、アイコンのスタイルを変更するいくつかの異なる小道具を取ることができます.ここで我々はcolor and size 小道具size prop文字列の値を返します.xs , lg , 2x , 3x など😃.
いくつかのより多くの小道具が渡されることができます.特にrotation and pulse ブーリアンの小道具自体がアイコンを回転させます.

注:あなたのFontaWamyのCDNリンクを使用しないでくださいindex.html ファイル.それはあなたのサイトのパフォーマンスを低下させます.

結論

以上です.ハーレイ🎉, あなたはそれをした.プロセスはかなりまっすぐですが、簡単にあなたのアプリケーションでこれを実装することができます.それを試してください、あなたは間違いなくそれを愛する😍.
読書ありがとう!いい一日をお過ごしください
Twitterで見つけてください👀.
このポストも私のblog ページ.