One place for hosting & domains

      Awesome

      ReactでFont Awesome 5を使用する方法


      はじめに

      Font Awesomeはウェブサイトでアイコンやソーシャルロゴを提供してくれるウェブサイトのツールキットです。Reactはユーザーインターフェースの作成に使用するJavaScriptコードライブラリです。Font Awesomeチームは統合促進のため、Reactコンポーネントを開発しましたが、Font Awesome 5とその構造について、基本を理解しておく必要があります。このチュートリアルでは、React Font Awesomeコンポーネントの使用方法を説明します。

      アイコンが表示されたFont Awesomeウェブサイト

      前提条件

      このチュートリアルでコーディングは必要ありませんが、例をいくつか試すなら、次のものが必要です。

      ステップ1 — Font Awesomeを使用する

      Font AwesomeチームはFont Awesomeと併用できるように、Reactコンポーネントを開発しました。このライブラリについては、アイコン選択後、チュートリアルに従ってください。

      この例では、homeアイコンを使用して、App.jsファイルですべてを行います。

      src/App.js

      import React from "react";
      import { render } from "react-dom";
      
      // get our fontawesome imports
      import { faHome } from "@fortawesome/free-solid-svg-icons";
      import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
      
      // create our App
      const App = () => (
        <div>
          <FontAwesomeIcon icon={faHome} />
        </div>
      );
      
      // render to #root
      render(<App />, document.getElementById("root"));
      

      アプリには今、小さな家のアイコンが表示されています。このコードではhomeアイコンしか選択されず、バンドルサイズにアイコン1つ分が加わっただけであると分かります。

      homeアイコンが表示されたcode sandbox

      これでFont Awesomeは、このコンポーネントが一旦マウントされれば、SVGバージョンに置き換わることを確認します。

      ステップ2 — アイコンの選択

      アイコンをインストールして使用する前に、Font Awesomeライブラリの構造を知っておくことが重要です。アイコンの数が多いため、複数のパッケージに分割することになりました。

      どのアイコンを使うか選ぶ際、Font Awesomeアイコンページにアクセスして、選択肢を検討することをお勧めします。ページの左欄にさまざまなフィルタが表示されます。これらのフィルタは、アイコンのインポート元パッケージを示すので、大変重要です。

      上記の例では、@fortawesome/free-solid-svg-iconsパッケージからhomeアイコンを取り出しました。

      アイコンが属するパッケージを特定する

      アイコンが属するパッケージは、左欄のフィルタを確認すればわかります。また、アイコンをクリックして、所属先パッケージを表示することもできます。

      フォントの属するパッケージがわかったら、そのパッケージの3文字略語を覚えましょう。

      • ソリッドスタイル – fas
      • レギュラースタイル – far
      • ライトスタイル – fal
      • デュオトーンスタイル – fad

      アイコンページから特定のタイプを検索できます。

      左欄にパッケージ名が表示されたアイコンページ。

      特定のパッケージのアイコンを使用する

      Font Awesomeアイコンページを閲覧すると、大抵の場合、同じアイコンでも複数バージョンあるのが分かります。たとえば、boxing-gloveアイコンを見てみましょう。

      3バージョンのboxing gloveアイコン

      特定のアイコンを使用するには、<FontAwesomeIcon>を調整します。さまざまなパッケージに属する複数のタイプの同じアイコンを以下に示します。各アイコンにはそれぞれ、先ほど触れた3文字略語が含まれます。

      注:次の例は、数セクション先でアイコンライブラリを作成するまでは機能しません。

      ソリッドバージョンの一例:

      <FontAwesomeIcon icon={['fas', 'code']} />
      

      タイプを指定しなければ、これがソリッドバージョンのデフォルトになります。

      <FontAwesomeIcon icon={faCode} />
      

      falを使用するライト版です。

      <FontAwesomeIcon icon={['fal', 'code']} />;
      

      icon プロップを単純な文字列ではなく配列に変更ました。

      Font Awesomeのインストール

      1つのアイコンに複数のバージョン、複数のパッケージ、無料/有料パッケージがあるので、フルインストールすると1npmパッケージより大きくなります。 パッケージを複数インストールしてから、必要なアイコンを選択するのがよいでしょう。

      この記事では、すべてをインストールして、複数のパッケージをインストールする方法を説明します。

      次のコマンドを実行してベースパッケージをインストールします。

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

      次のコマンドを実行して、レギュラーアイコンをインストールします。

      • # regular icons
      • npm i -S @fortawesome/free-regular-svg-icons
      • npm i -S @fortawesome/pro-regular-svg-icons

      これらのコマンドでソリッドアイコンをインストールします。

      • # solid icons
      • npm i -S @fortawesome/free-solid-svg-icons
      • npm i -S @fortawesome/pro-solid-svg-icons

      このコマンドでライトアイコンをインストールします。

      • # light icons
      • npm i -S @fortawesome/pro-light-svg-icons

      このコマンドでデュオトーンアイコンをインストールします。

      • # duotone icons
      • npm i -S @fortawesome/pro-duotone-svg-icons

      最後に、このコマンドでブランドアイコンをインストールします。

      • # brand icons
      • npm i -S @fortawesome/free-brands-svg-icons

      あるいは、一度にすべてをインストールしたければ、このコマンドで無料のアイコンセットをインストールできます。

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

      Font Awesomeのプロアカウントがあれば、次のコマンドですべてのアイコンをインストールできます。

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

      パッケージはインストールしましたが、アプリケーションでの使用、アプリバンドルへの追加はこれからです。次のステップでその方法を見てみましょう。

      ステップ4 — アイコンライブラリの作成

      複数のファイルにアイコンをインポートするのは面倒な作業です。たとえば、Twitterのロゴを数カ所で使用するとしましょう。何度も記述したくありません。

      すべてを一箇所にインポートするには、各アイコンをファイルごとにインポートするのではなく、Font Awesome libraryを作成します。

      srcフォルダーにfontawesome.jsを作成し、それをindex.jsにインポートしましょう。そのアイコンを使用したいコンポーネントがアクセス可能な範囲で(つまり子コンポーネント)、このファイルをどこでも好きな場所に置いてください。index.jsApp.jsでおこなってもうまくいきます。ただし、ファイルが巨大化するおそれがあるので、別ファイルに移動させた方がよいでしょう。

      src/fontawesome.js

      // import the library
      import { library } from '@fortawesome/fontawesome-svg-core';
      
      // import your icons
      import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
      import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';
      
      library.add(
        faMoneyBill,
        faCode,
        faHighlighter
        // more icons go here
      );
      

      独自のファイルで実施した場合、index.jsにインポートする必要があります。

      src/index.js

      import React from 'react';
      import { render } from 'react-dom';
      
      // import your fontawesome library
      import './fontawesome';
      
      render(<App />, document.getElementById('root'));
      

      アイコンパッケージ全体のインポート

      パッケージ全体をインポートするのはお勧めしません。アイコン一つ一つをアプリにインポートすると、バンドルサイズの巨大化を招くおそれがあるからです。パッケージ全体をインポートする必要があれば、もちろんそうすることもできます。

      この例では、@fortaesome/free-brands-svg-iconにあるすべてのブランドアイコンをインポートするとしましょう。次のコマンドを入力してパッケージ全体をインポートします。

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { fab } from '@fortawesome/free-brands-svg-icons';
      
      library.add(fab);
      

      fabはブランドアイコン全体を表します。

      アイコンの個別インポート

      Font Awesomeアイコンは、バンドルサイズを極力軽くするために、ひとつずつ、必要なアイコンのみインポートすることをお勧めします。

      次のように、さまざまなパッケージのアイコンで構成されるライブラリを作成できます。

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      
      import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
      import { faImages } from '@fortawesome/pro-solid-svg-icons';
      import {
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      } from '@fortawesome/free-brands-svg-icons';
      
      library.add(
        faUserGraduate,
        faImages,
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      );
      

      複数のスタイルから同じアイコンをインポートする

      falfarfasパッケージにある全タイプのboxing-gloveをインポートしたければ、別の名前を付けることで、すべてインポートして追加できます。

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveRegular
      } from '@fortawesome/pro-regular-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveSolid
      } from '@fortawesome/pro-solid-svg-icons';
      
      library.add(
          faBoxingGlove,
          faBoxingGloveRegular,
          faBoxingGloveSolid
      );
      

      これで、異なるプレフィックスを付けてこれらのアイコンを使用できます。

      <FontAwesomeIcon icon={['fal', 'boxing-glove']} />
      <FontAwesomeIcon icon={['far', 'boxing-glove']} />
      <FontAwesomeIcon icon={['fas', 'boxing-glove']} />
      

      ステップ5 — アイコンの使用

      必要なものをインストールし、アイコンをFont Awesomeライブラリに追加したので、これらを使用してサイズを割り当てる準備が整いました。このチュートリアルでは、ライト(fal)パッケージを使用します。

      1つ目の例では、通常のサイズを使用します。

      <FontAwesomeIcon icon={['fal', 'code']} />
      

      2つ目の例では、サイズ名を使用します。サイズ名には、小(sm)、中(md)、大(lg)、特大(xl)を略称で使用します。

      <FontAwesomeIcon icon={['fal', 'code']} size="sm" />
      <FontAwesomeIcon icon={['fal', 'code']} size="md" />
      <FontAwesomeIcon icon={['fal', 'code']} size="lg" />
      <FontAwesomeIcon icon={['fal', 'code']} size="xl" />
      

      3つ目の例では、サイズ番号(最大6)を使用します。

      <FontAwesomeIcon icon={['fal', 'code']} size="2x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="3x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="4x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="5x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="6x" />
      

      サイズ番号を使用する際、小数点を使用して完璧なサイズを得ることもできます。

      <FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />
      

      Font AwesomeはCSSの文字色を利用して、使用するSVGをスタイリングします。このアイコンを置く場所に <p>タグを配置すると、その段落の色がアイコンの色になります。

      <FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />
      

      Font Awesomeにあるpower transforms機能を使用すると、さまざまな変形をつなぎ合わせられます。

      <FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />
      

      Font Awesomeサイトにある変形なら何でも使用できます。これを使用すると、アイコンを上下左右に動かしたり、文字の横でもボタンの内部でも最適な位置に配置できます。

      アイコンの幅を固定する

      一箇所で複数のアイコンを、同じ幅で揃えて使用するには、Font AwesomeのfixedWidth のプロップが使用できます。。たとえば、ナビゲーションドロップダウン用に幅を固定させる必要があるとしましょう。

      ドロップダウンメニューとハイライトされた「Courses」が表示されたスコッチウェブサイト

      <FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />
      

      アイコンを回転させる

      フォームが処理中の際、フォームボタンに回転機能を実装すると便利です。ロード中を効果的に示す回転アイコンを使用できます。

      <FontAwesomeIcon icon={['fal', 'spinner']} spin />
      

      spin プロップは何にでも使用できます。

      <FontAwesomeIcon icon={['fal', 'code']} spin />
      

      拡張機能:アイコンをマスクする

      Font Awesomeでは2つのアイコンを組み合わせてマスキング効果を施せます。1つ目の通常アイコンを定義し、次にmaskプロップを使用して2つ目のアイコンを定義して上部に配置します。1つ目のアイコンが、マスキングアイコンの下で抑制されます。

      この例では、マスキングを使用してタグフィルターを作成しました。

      Font Awesomeのタグフィルター

      <FontAwesomeIcon
        icon={['fab', 'javascript']}
        mask={['fas', 'circle']}
        transform="grow-7 left-1.5 up-2.2"
        fixedWidth
      />
      

      複数のtransform プロップをどのようにつなげ、下部のアイコンを移動させてマスキングアイコンに合わせているかに注目してください。

      Font Awesomeで背景ロゴまで色付け、変更しています。

      再びタグフィルター、今度は青色の背景で

      ステップ6 — Reactの外でreact-fontscapeとアイコンを使用する

      サイト全体が単ページのアプリケーション(SPA)ではなく、従来型のサイトが設けられ、Reactがトップに追加されているとします。Font Awesomeは、メインのSVG/JSライブラリとreact-fontawesomeライブラリのインポートを避け、Reactライブラリを使用してReactコンポーネントの外部のアイコンを監視する方法を編み出しました。

      <i class="fas fa-stroopwafel"></i>がある場合、次のようにそれらのアイコンを監視・更新するよう、Font Awesomeに指示します。

      import { dom } from '@fortawesome/fontawesome-svg-core'
      
      dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver
      

      MutationObserverは、DOMの変更の常時監視を実現するWebテクノロジーです。この技術については、Reactフォント Awesomeドキュメントを参照してください。

      まとめ

      Font AwesomeとReactの併用は素晴らしい組み合わせですが、複数のパッケージを使用し、異なる組み合わせを検討する必要が生じます。このチュートリアルでは、Font AwesomeとReactを併用する方法をいくつか説明しました。



      Source link

      Cara Menggunakan Font Awesome 5 dengan React


      Pengantar

      Font Awesome adalah kit alat untuk situs web yang menyediakan ikon dan logo sosial. React adalah pustaka pengodean yang digunakan untuk membuat antarmuka pengguna. Walaupun tim Font Awesome telah membuat komponen React untuk mendorong integrasi, ada beberapa hal mendasar yang harus dipahami tentang Font Awesome 5 dan strukturnya. Dalam tutorial ini, Anda akan mendalami cara menggunakan komponen React dari Font Awesome.

      Situs web Font Awesome beserta ikonnya

      Prasyarat

      Tidak diperlukan pengodean untuk tutorial ini, tetapi jika Anda tertarik bereksperimen dengan beberapa contoh, Anda akan membutuhkan hal berikut:

      Langkah 1 — Menggunakan Font Awesome

      Tim Font Awesome telah membuat komponen React sehingga Anda dapat menggunakan keduanya bersama-sama. Dengan pustaka ini, Anda dapat mengikuti tutorial setelah memilih ikon Anda.

      Dalam contoh ini, kita akan menggunakan ikon home dan melakukan segalanya dalam berkas App.js:

      src/App.js

      import React from "react";
      import { render } from "react-dom";
      
      // get our fontawesome imports
      import { faHome } from "@fortawesome/free-solid-svg-icons";
      import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
      
      // create our App
      const App = () => (
        <div>
          <FontAwesomeIcon icon={faHome} />
        </div>
      );
      
      // render to #root
      render(<App />, document.getElementById("root"));
      

      Aplikasi Anda sekarang memiliki ikon rumah kecil. Anda akan melihat bahwa kode ini hanya memilih ikon home sehingga hanya satu ikon yang ditambahkan ke ukuran bundel kita.

      kode sandbox bersama ikon rumah ditampilkan

      Sekarang, Font Awesome akan memastikan bahwa komponen ini akan diganti sendiri dengan versi SVG dari ikon itu setelah komponen ini dipasang.

      Langkah 2 — Memilih Ikon

      Sebelum menginstal dan menggunakan ikon, kita perlu mengetahui struktur pustaka Font Awesome. Karena ada banyak ikon, tim memutuskan untuk membaginya menjadi beberapa paket.

      Ketika memilih ikon yang diinginkan, Anda disarankan untuk mengunjungi laman ikon Font Awesome untuk mempelajari berbagai opsi Anda. Anda akan melihat beragam filter untuk dipilih di sepanjang sisi kiri halaman. Semua filter ini sangat penting karena menunjukkan dari paket ikon yang akan diimpor.

      Dalam contoh di atas, kita menarik ikon home dari paket @fortawesome/free-solid-svg-icons.

      Menentukan Paket yang akan Memiliki Ikon

      Anda dapat mengetahui paket yang memiliki ikon dengan meninjau filter di sebelah kiri. Anda juga dapat mengklik ikon dan melihat paket yang memilikinya.

      Setelah Anda mengetahui paket yang memiliki font, Anda perlu mengingat singkatan tiga huruf untuk paket itu:

      • Gaya Solid – fas
      • Gaya Reguler – far
      • Gaya Ringan – fal
      • Gaya Duotone – fad

      Anda dapat mencari tipe tertentu dari halaman ikon:

      laman ikon dengan beberapa nama paket di sebelah kiri

      Menggunakan Ikon dari Paket Spesifik

      Jika Anda menyusuri laman ikon Font Awesome, Anda akan melihat bahwa biasanya ikon yang sama memiliki beberapa versi. Misalnya, mari kita perhatikan ikon boxing-glove (sarung tinju):

      tiga macam versi ikon sarung tinju

      Untuk menggunakan ikon tertentu, Anda akan perlu menyesuaikan <FontAwesomeIcon>. Berikut ini beberapa tipe ikon yang sama dari paket berbeda. Tipe ini disertai singkatan tiga huruf yang kita bahas sebelumnya.

      Catatan: Contoh berikut tidak akan berhasil hingga kita membangun pustaka ikon dalam beberapa bagian.

      Berikut ini contoh versi solid:

      <FontAwesomeIcon icon={['fas', 'code']} />
      

      Ini bentuk asali versi solid jika tipe tidak ditentukan:

      <FontAwesomeIcon icon={faCode} />
      

      Dan versi ringan menggunakan fal:

      <FontAwesomeIcon icon={['fal', 'code']} />;
      

      Kita harus mengubah properti icon menjadi array sebagai ganti string sederhana.

      Langkah 3 — Menginstal Font Awesome

      Karena ada beberapa versi ikon, berbagai paket, dan paket gratis/pro, menginstal itu semua akan melibatkan lebih dari satu npm. Anda mungkin perlu menginstal beberapa ikon, kemudian memilih ikon yang diinginkan.

      Untuk artikel ini, kita akan menginstal semuanya sehingga kita dapat memeragakan cara menginstal beberapa paket.

      Jalankan perintah berikut untuk menginstal paket dasar:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

      Jalankan perintah berikut untuk menginstal ikon reguler:

      • # regular icons
      • npm i -S @fortawesome/free-regular-svg-icons
      • npm i -S @fortawesome/pro-regular-svg-icons

      Ini akan menginstal ikon solid:

      • # solid icons
      • npm i -S @fortawesome/free-solid-svg-icons
      • npm i -S @fortawesome/pro-solid-svg-icons

      Gunakan perintah ini untuk ikon ringan:

      • # light icons
      • npm i -S @fortawesome/pro-light-svg-icons

      Ini akan menginstal ikon duotone:

      • # duotone icons
      • npm i -S @fortawesome/pro-duotone-svg-icons

      Terakhir, ini akan menginstal ikon merek:

      • # brand icons
      • npm i -S @fortawesome/free-brands-svg-icons

      Atau, jika lebih suka menginstal semuanya sekaligus, Anda dapat menggunakan perintah ini untuk menginstal set ikon gratis:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

      Jika Anda memiliki akun pro Font Awesome, Anda dapat menggunakan yang berikut ini untuk menginstal semua ikon:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

      Anda telah menginstal paket, tetapi belum menggunakannya dalam aplikasi atau menambahkannya ke bundel aplikasi kita. Mari kita lihat cara melakukannya di langkah selanjutnya.

      Langkah 4 — Membuat Pustaka Ikon

      Mengimpor ikon yang diinginkan ke beberapa berkas mungkin terasa membosankan. Misalnya, Anda menggunakan logo Twitter di beberapa tempat dan Anda tidak ingin menulisnya berkali-kali.

      Untuk mengimpor segala sesuatunya di satu tempat, bukannya mengimpor setiap ikon ke dalam setiap berkas terpisah, kita akan membuat pustaka Font Awesome.

      Mari kita buat fontawesome.js dalam folder src, kemudian mengimpornya ke dalam index.js. Silakan menambahkan berkas ini di sebarang tempat selama komponen ikon yang Anda ingin gunakan tersebut memiliki akses (merupakan komponen anak). Anda bahkan dapat melakukan ini langsung di index.js atau App.js. Namun, lebih baik kita memindahnya ke berkas terpisah karena bisa membesar:

      src/fontawesome.js

      // import the library
      import { library } from '@fortawesome/fontawesome-svg-core';
      
      // import your icons
      import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
      import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';
      
      library.add(
        faMoneyBill,
        faCode,
        faHighlighter
        // more icons go here
      );
      

      Jika Anda melakukannya di berkas itu sendiri, berarti Anda perlu mengimpornya ke index.js:

      src/index.js

      import React from 'react';
      import { render } from 'react-dom';
      
      // import your fontawesome library
      import './fontawesome';
      
      render(<App />, document.getElementById('root'));
      

      Mengimpor Seluruh Paket Ikon

      Sebaiknya, jangan mengimpor seluruh paket karena akan mengimpor setiap ikon tunggal ke aplikasi Anda sehingga bisa menyebabkan ukuran bundel menjadi besar. Jika Anda perlu mengimpor seluruh paket, tentu Anda bisa melakukannya.

      Dalam contoh ini, katakanlah Anda menginginkan semua ikon merek di @fortawesome/free-brands-svg-icons. Anda perlu menggunakan yang berikut untuk mengimpor keseluruhan paket:

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { fab } from '@fortawesome/free-brands-svg-icons';
      
      library.add(fab);
      

      fab menyatakan seluruh paket ikon merek.

      Mengimpor Ikon Satu Per Satu

      Cara yang disarankan untuk menggunakan ikon Font Awesome adalah mengimpornya satu per satu agar ukuran bundel akhir Anda bisa sekecil mungkin, karena Anda akan mengimpor yang diperlukan saja.

      Anda dapat membuat pustaka dari beberapa ikon dari paket yang berbeda seperti ini:

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      
      import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
      import { faImages } from '@fortawesome/pro-solid-svg-icons';
      import {
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      } from '@fortawesome/free-brands-svg-icons';
      
      library.add(
        faUserGraduate,
        faImages,
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      );
      

      Mengimpor Ikon yang Sama dari Beberapa Gaya

      Jika Anda ingin semua tipe boxing-glove untuk paket fal, far, dan fas, Anda dapat mengimpornya semua dengan nama yang berbeda, kemudian menambahkannya.

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveRegular
      } from '@fortawesome/pro-regular-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveSolid
      } from '@fortawesome/pro-solid-svg-icons';
      
      library.add(
          faBoxingGlove,
          faBoxingGloveRegular,
          faBoxingGloveSolid
      );
      

      Lalu, Anda dapat menggunakannya dengan menerapkan awalan yang berbeda:

      <FontAwesomeIcon icon={['fal', 'boxing-glove']} />
      <FontAwesomeIcon icon={['far', 'boxing-glove']} />
      <FontAwesomeIcon icon={['fas', 'boxing-glove']} />
      

      Langkah 5 — Menggunakan Ikon

      Karena kini Anda telah menginstal yang diperlukan dan menambahkan ikon ke pustaka Font Awesome, Anda siap menggunakannya dan menetapkan ukuran. Dalam tutorial ini, kita akan menggunakan paket ringan (fal).

      Contoh pertama ini akan menggunakan ukuran normal:

      <FontAwesomeIcon icon={['fal', 'code']} />
      

      Contoh kedua dapat menggunakan penamaan ukuran, yaitu menggunakan singkatan untuk kecil (sm), sedang (md), besar (lg), dan ekstra besar (xl):

      <FontAwesomeIcon icon={['fal', 'code']} size="sm" />
      <FontAwesomeIcon icon={['fal', 'code']} size="md" />
      <FontAwesomeIcon icon={['fal', 'code']} size="lg" />
      <FontAwesomeIcon icon={['fal', 'code']} size="xl" />
      

      Opsi ketiga adalah menggunakan ukuran yang diberi nomor dan dapat mencapai 6:

      <FontAwesomeIcon icon={['fal', 'code']} size="2x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="3x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="4x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="5x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="6x" />
      

      Bila menggunakan penomoran ukuran, Anda juga dapat menggunakan desimal untuk menemukan ukuran yang tepat:

      <FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />
      

      Font Awesome memberi gaya pada SVG yang digunakannya dengan mengambil warna teks CSS. Jika Anda ingin menempatkan tag <p> tempat ikon ini akan ditampilkan, warna paragraf akan menjadi warna ikon:

      <FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />
      

      Font Awesome juga memiliki fitur transformasi pangkat yang memungkinkan Anda merangkai beberapa transformasi berbeda:

      <FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />
      

      Anda dapat menggunakan salah satu transformasi yang ditemukan di situs Font Awesome. Anda dapat menggunakannya untuk memindahkan ikon ke atas, bawah, kiri, atau kanan untuk mendapatkan posisi yang tepat di sebelah teks atau di dalam tombol.

      Ikon Lebar Tetap

      Saat menggunakan ikon di tempat yang mengharuskan ikon memiliki lebar yang sama dan seragam, Font Awesome memungkinkan kita menggunakan properti fixedWidth. Misalnya, katakanlah Anda perlu lebar tetap untuk daftar menu menurun navigasi:

      Situs web Scotch dengan daftar menu menurun dan

      <FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />
      

      Memutar Ikon

      Pemutaran sangat berguna untuk diterapkan pada tombol formulir saat formulir sedang diproses. Anda dapat menggunakan ikon berputar untuk membuat efek pemuatan yang menarik:

      <FontAwesomeIcon icon={['fal', 'spinner']} spin />
      

      Anda dapat menggunakan properti spin pada apa saja!

      <FontAwesomeIcon icon={['fal', 'code']} spin />
      

      Lanjutan: Melakukan Mask pada Ikon

      Font Awesome memungkinkan Anda menggabungkan dua ikon untuk membuat efek dengan melakukan mask. Anda mendefinisikan ikon normal, kemudian menggunakan properti mask untuk mendefinisikan ikon kedua yang diletakkan di atasnya. Ikon pertama akan dikurung dalam ikon yang dilakukan mask.

      Dalam contoh ini, kita membuat filter tag menggunakan mask:

      Filter Tag dengan Font Awesome

      <FontAwesomeIcon
        icon={['fab', 'javascript']}
        mask={['fas', 'circle']}
        transform="grow-7 left-1.5 up-2.2"
        fixedWidth
      />
      

      Perhatikan cara merangkai beberapa properti transform untuk memindahkan ikon bagian dalam agar pas di dalam ikon yang dilakukan mask.

      Kita akan mewarnai dan mengubah logo latar belakang dengan Font Awesome:

      Filter Tag lagi, tetapi kini dengan latar belakang biru

      Langkah 6 — Menggunakan react-fontawesome dan Ikon di Luar React

      Jika keseluruhan situs Anda bukan aplikasi laman tunggal (SPA), melainkan situs biasa dan Anda menambahkan React di atasnya. Untuk menghindari mengimpor pustaka SVG/JS utama serta pustaka react-fontawesome, Font Awesome telah membuat cara menggunakan pustaka React untuk mencari ikon di luar komponen React.

      Jika Anda memiliki <i class="fas fa-stroopwafel"></i>, kita dapat memberi tahu Font Awesome agar mengamati dan memperbarui menggunakan yang berikut:

      import { dom } from '@fortawesome/fontawesome-svg-core'
      
      dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver
      

      MutationObserver adalah teknologi web yang memungkinkan kita mengamati perubahan yang dilakukan pada DOM. Lihat lebih lanjut tentang teknik ini di dokumentasi React Font Awesome.

      Kesimpulan

      Menggunakan Font Awesome dan React bersama-sama adalah kombinasi yang bagus, tetapi mengharuskan kita menggunakan beberapa paket dan mempertimbangkan beragam kombinasi. Dalam tutorial ini, Anda telah mendalami beberapa cara menggunakan Font Awesome dan React bersama-sama.



      Source link

      Cómo usar Font Awesome 5 con React


      Introducción

      Font Awesome es un kit de herramientas para sitios web que proporciona iconos y logotipos de redes sociales. React es una biblioteca de codificación que se utiliza para crear interfaces de usuario. Aunque el equipo de Font Awesome ha creado un componente React para promover la integración, existen algunos fundamentos para comprender Font Awesome 5 y cómo se estructura. En este tutorial explorará cómo usar el componente React Font Awesome.

      Sitio web Font Awesome con sus iconos

      Requisitos previos

      No es necesario trabajar con código para este tutorial, pero si está interesado en experimentar con algunos de los ejemplos, necesitará lo siguiente:

      Paso 1: Usar Font Awesome

      El equipo de Font Awesome creó un componente React, de forma que puede usarlos juntos. Con esta biblioteca, puede seguir el tutorial tras seleccionar su icono.

      En este ejemplo, usaremos el icono home y haremos todo en el archivo App.js:

      src/App.js

      import React from "react";
      import { render } from "react-dom";
      
      // get our fontawesome imports
      import { faHome } from "@fortawesome/free-solid-svg-icons";
      import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
      
      // create our App
      const App = () => (
        <div>
          <FontAwesomeIcon icon={faHome} />
        </div>
      );
      
      // render to #root
      render(<App />, document.getElementById("root"));
      

      Su aplicación ahora tiene un pequeño icono de inicio. Observará que este código solo selecciona el icono de inicio para que solo se añada un icono a nuestro tamaño del paquete.

      code sandbox mostrando el icono de inicio

      Ahora, Font Awesome se asegurará de que este componente se sustituya con la versión SVG de ese icono una vez que se monta este componente.

      Paso 2: Seleccionar iconos

      Antes de instalar y usar los iconos, es importante saber cómo se estructuran las bibliotecas de Font Awesome. Ya que hay muchos iconos, el equipo decidió dividirlos en varios paquetes.

      Cuando elija qué iconos quiere, se recomienda que visite la página de iconos de Font Awesome para explorar sus opciones. Verá diferentes filtros para elegir en el lado izquierdo de la página. Estos filtros son muy importantes porque indicarán qué desde qué paquete importar su icono.

      En el ejemplo anterior, sacamos el icono de inicio del paquete @fortawesome/free-solid-svg-icons.

      Determinar a qué paquete pertenece un icono

      Puede averiguar a qué paquete pertenece un icono revisando los filtros a la izquierda. También puede hacer clic en un icono y ver el paquete al que pertenece.

      Una vez que sepa a qué paquete pertenece una fuente, es importante recordar la abreviatura de tres letras para ese paquete:

      • Estilo sólido: fas
      • Estilo regular: far
      • Estilo ligero: fal
      • Estilo duotono: fad

      Puede buscar un tipo específico desde la página de iconos:

      página de iconos con algunos de los nombres del paquete a la izquierda

      Usar iconos de paquetes específicos

      Si examina la página de iconos de Font Awesome, observará que hay varias versiones del mismo icono. Por ejemplo, vamos a echar un vistazo al icono boxing-glove:

      tres versiones diferentes del icono de guante de boxeo

      Para usar un icono específico necesitará ajustar <FontAwesomeIcon> A continuación hay múltiples tipos del mismo icono de diferentes paquetes. Estos incluyen las abreviaturas de tres letras explicadas anteriormente.

      Nota: Los siguientes ejemplos no funcionarán hasta que creemos una biblioteca de iconos en algunas secciones.

      Aquí hay un ejemplo de una versión sólida:

      <FontAwesomeIcon icon={['fas', 'code']} />
      

      Esto va por defecto a la versión sólida si no se especifica un tipo:

      <FontAwesomeIcon icon={faCode} />
      

      Y la versión ligera usando fal:

      <FontAwesomeIcon icon={['fal', 'code']} />;
      

      Hemos tenido que cambiar nuestro prop icono para que sea una matriz en vez de una cadena sencilla.

      Paso 3 – Instalar Font Awesome

      Ya que hay múltiples versiones de un icono, paquetes múltiples y paquetes gratuitos/profesionales, instalarlos todos implica más de un paquete npm. Es posible que necesite instalar múltiples y luego elegir los iconos que desea.

      Para este artículo, instalaremos todo para demostrar cómo instalar múltiples paquetes.

      Luego, ejecute el siguiente comando para instalar los paquetes básicos:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

      Ejecute los siguientes comandos para instalar los iconos regulares:

      • # regular icons
      • npm i -S @fortawesome/free-regular-svg-icons
      • npm i -S @fortawesome/pro-regular-svg-icons

      Estos instalarán los iconos sólidos:

      • # solid icons
      • npm i -S @fortawesome/free-solid-svg-icons
      • npm i -S @fortawesome/pro-solid-svg-icons

      Utilice este comando para los iconos ligeros:

      • # light icons
      • npm i -S @fortawesome/pro-light-svg-icons

      Esto instalará iconos duotone:

      • # duotone icons
      • npm i -S @fortawesome/pro-duotone-svg-icons

      Finalmente, esto instalará los iconos de marca:

      • # brand icons
      • npm i -S @fortawesome/free-brands-svg-icons

      O, si prefiere instalarlos todos a la vez, puede usar este comando para instalar los conjuntos de iconos gratuitos:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

      Si tiene una cuenta profesional con Font Awesome, puede usar lo siguiente para instalar todos los iconos:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

      Ha instalado los paquetes pero no los ha usado aún en su aplicación ni los ha añadido aún a los paquetes de nuestra aplicación. Vamos a ver cómo puede hacer eso en el siguiente paso.

      Paso 4: Crear una biblioteca de iconos

      Puede ser tedioso importar el icono que desea en varios archivos. Digamos que usa el logotipo de Twitter en varios lugares, y no quiere escribir eso varias veces.

      Para importar todo en un único lugar, en vez de importar cada icono en un archivo independiente, crearemos una biblioteca de Font Awesome.

      Vamos a crear fontawesome.js en la carpeta src y luego importar eso en index.js. Puede añadir este archivo en cualquier lugar siempre que los componentes en los que desea usar los iconos tengan acceso (sean componentes secundarios). Incluso podría hacer esto en su index.js o App.js. Sin embargo, puede ser mejor mover esto a un archivo independiente ya que puede ser grande:

      src/fontawesome.js

      // import the library
      import { library } from '@fortawesome/fontawesome-svg-core';
      
      // import your icons
      import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
      import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';
      
      library.add(
        faMoneyBill,
        faCode,
        faHighlighter
        // more icons go here
      );
      

      Si hizo esto en su propio archivo, necesitará importar a index.js:

      src/index.js

      import React from 'react';
      import { render } from 'react-dom';
      
      // import your fontawesome library
      import './fontawesome';
      
      render(<App />, document.getElementById('root'));
      

      Importar un paquete de iconos entero

      No se recomienda importar un paquete entero porque está importando todos los iconos a su aplicación, lo que podría causar un tamaño grande del paquete. Si necesita importar un paquete entero, puede hacerlo sin duda.

      En este ejemplo, digamos que quería todos los iconos de marca en @fortawesome/free-brands-svg-icons. Usaría lo siguiente para importar todo el paquete:

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { fab } from '@fortawesome/free-brands-svg-icons';
      
      library.add(fab);
      

      fab representa todo el paquete de iconos de marcas.

      Importar iconos individualmente

      La forma recomendada de usar los iconos de Font Awesome es importarlos uno a uno de forma que el tamaño de sus paquetes sea lo más pequeño posible, ya que solo importará lo que necesita.

      Puede crear una biblioteca de múltiples iconos de diferentes paquetes, de esta forma:

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      
      import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
      import { faImages } from '@fortawesome/pro-solid-svg-icons';
      import {
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      } from '@fortawesome/free-brands-svg-icons';
      
      library.add(
        faUserGraduate,
        faImages,
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      );
      

      Importar el mismo icono desde múltiples estilos

      Si desea todos los tipos de boxing-glove para los paquetes fal, far y fas, puede importarlos todos con un nombre diferente y añadirlos.

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveRegular
      } from '@fortawesome/pro-regular-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveSolid
      } from '@fortawesome/pro-solid-svg-icons';
      
      library.add(
          faBoxingGlove,
          faBoxingGloveRegular,
          faBoxingGloveSolid
      );
      

      Más tarde podrá usarlos implementando los diferentes prefijos:

      <FontAwesomeIcon icon={['fal', 'boxing-glove']} />
      <FontAwesomeIcon icon={['far', 'boxing-glove']} />
      <FontAwesomeIcon icon={['fas', 'boxing-glove']} />
      

      Paso 5: Usar los iconos

      Ahora que ha instalado lo que necesita y ha añadido sus iconos a su biblioteca Font Awesome, está listo para usarlos y asignar tamaños. En este tutorial, usaremos el paquete (fal) ligero.

      Este primer ejemplo usaremos el tamaño normal:

      <FontAwesomeIcon icon={['fal', 'code']} />
      

      El segundo ejemplo puede usar named sizing que usa abreviaturas para pequeño (sm), medio (md), grande (lg) y extra grande (xl):

      <FontAwesomeIcon icon={['fal', 'code']} size="sm" />
      <FontAwesomeIcon icon={['fal', 'code']} size="md" />
      <FontAwesomeIcon icon={['fal', 'code']} size="lg" />
      <FontAwesomeIcon icon={['fal', 'code']} size="xl" />
      

      La tercera opción es usar el tamaño numerado que puede llegar a 6:

      <FontAwesomeIcon icon={['fal', 'code']} size="2x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="3x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="4x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="5x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="6x" />
      

      Cuando se usa el tamaño numerado, puede usar también decimales para encontrar el tamaño perfecto:

      <FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />
      

      Font Awesome crea estilo para SVG y lo utiliza tomando el color del texto del CSS. Si fuese a colocar una etiqueta <p> donde iría este icono, el color del párrafo sería del color del icono:

      <FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />
      

      Font Awesome también tiene una función de transformaciones de potencia donde puede unir varias transformaciones diferentes:

      <FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />
      

      Puede usar cualquiera de las transformaciones en el sitio de Font Awesome. Puede usar esto para mover los iconos hacia arriba, hacia abajo, a la izquierda o ala derecha para posicionarlos perfectamente junto al texto o dentro de los botones.

      Iconos con ancho fijo

      Cuando utilice iconos en un lugar donde deben tener el mismo ancho y ser uniformes, Font Awesome nos permite usar el prop fixedWidth. Por ejemplo, digamos que necesita anchos fijos para su desplegable de navegación:

      Sitio web de Scotch con menú desplegable y

      <FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />
      

      Iconos giratorios

      El giro es útil para implementar botones de formulario cuando se procesa un formulario. Puede usar el icono giratorio para crear un buen efecto de carga:

      <FontAwesomeIcon icon={['fal', 'spinner']} spin />
      

      Puede usar el prop spin en cualquier cosa.

      <FontAwesomeIcon icon={['fal', 'code']} spin />
      

      Avanzado: enmascarar iconos

      Font Awesome le permite combinar dos iconos para crear efectos con enmascaramiento. Define su icono normal y luego utiliza el prop mask para definir un segundo icono que poner encima. El primer icono estará limitado dentro del icono de enmascaramiento.

      En este ejemplo, creamos filtros de etiquetas usando el enmascaramiento:

      Filtros de etiqueta con Font Awesome

      <FontAwesomeIcon
        icon={['fab', 'javascript']}
        mask={['fas', 'circle']}
        transform="grow-7 left-1.5 up-2.2"
        fixedWidth
      />
      

      Observe cómo puede encadenar múltiples props transform para mover el icono interior para que se ajuste dentro del icono de enmascaramiento.

      Podemos incluso dar color y cambiar el logotipo en segundo plano con Font Awesome:

      El filtro Etiqueta de nuevo, pero ahora con un fondo azul

      Paso 6: Usar react-fontawesome e iconos fuera de React

      Si todo su sitio no es una aplicación de página única (SPA), y en vez de eso tiene un sitio web tradicional y ha añadido React encima. Para evitar importar la biblioteca SVG/JS principal y también la biblioteca react-fontawesome, Font Awesome ha creado una forma de usar las bibliotecas React para ver iconos fuera de los componentes de React.

      Si tiene algún <i class="fas fa-stroopwafel"></i>, podemos indicar a Font Awesome que observe y actualice esto usando lo siguiente:

      import { dom } from '@fortawesome/fontawesome-svg-core'
      
      dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver
      

      MutationObserver es una tecnología web que nos permite vigilar el DOM en busca de cambios de forma automática. Descubra más sobre esta técnica en los documentos de React Font Awesome.

      Conclusión

      Usar Font Awesome y React juntos es una excelente combinación, pero crea la necesidad de usar múltiples paquetes y considerar diferentes combinaciones. En este tutorial, exploró algunas de las formas de usar Font Awesome y React juntos.



      Source link