3-8 使用 React FontAwesome

本單元對應的專案分支為：apply-react-font-awesome。

現在我們已經完成了網速單位換算器的所有功能，最後我們要來完成一開始沒有處理的圖示部分。在這個專案中，圖示都是來自 FontAwesome 這套工具，這套工具提供許多圖示給網頁開發者使用，其中部分圖示是免費的，部分則需要額外付費，而在這個專案中只會使用到免費的圖示。

為什麼會需要等到講完元件的部分後才來實作圖示的功能呢？這是因為這裡使用的 FontAwesome 是專門寫給 React 使用的，因此已經包裝成元件的形式可以直接套用，現在就讓我們來完成圖示的部分吧！

安裝 React FontAwesome#

這裡我們會使用 Node.js 的套件管理工具（Node Package Manager）來要安裝 Font Awesome 到專案當中，只需要 VS Code 的終端機中下述指令即可完成安裝：

$ npm i --save @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons

小提醒

這裡雖然名稱是 fontawesome，但它是放在 @fortawesome 這裡面，你並沒有拼錯字喔！

這裡你會發現要使用 React FontAwesome 這個工具一共需要安裝 5 個對應的套件：

其中 fortawesome/fontawesome-svg-core 和 @fortawesome/react-fontawesome 算是把 FontAwesome 變成 React 元件加以使用的核心部分。
其餘的三個 @fortawesome/free-regular-svg-icons、@fortawesome/free-brands-svg-icons 和 @fortawesome/free-solid-svg-icons 則是 FontAwesome 將所有圖示分成三類，分別是 regular、brands 和 solid 這三類。

React FontAwesome 的使用#

註冊 React FontAwesome 中會用到的圖示#

這裡我們會用 FontAwesome 提供的最基本功能，也就是顯示圖示的部分。使用時會需要在最上層的元件，也就是 App.js 這支檔案中註冊 FontAwesome 工具：

// App.js
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

library.add(fab, fas, far);

info

在這裡為了說明上的方便，我們把 FontAwesome 提供的所有圖示都載入進來，但實際使用時，為了避免載入的檔案太過龐大影響使用者瀏覽的速度，通常只會載入有用到的圖示。

在需要的地方使用 React FontAwesome 元件#

接著在需要使用 FontAwesome 圖示的地方，只需要按照下面的步驟即可使用：

import React from 'react';
// STEP 1：在想要使用圖示的地方匯入 React FontAwesome
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export const Gadget = () => (
  <div>
    {/* STEP 2：套用 FontAwesome 提供的 microsoft 圖示} */}
    <FontAwesomeIcon icon={['fab', 'microsoft']} />
  </div>
);

這裡你會發現到，要選擇套用哪一個圖示的方式，就和把 props 傳入子層元件的方式一樣，只需要在 <FontAwesomeIcon /> 這個元件中使用 icon={...} 帶入就可以了。至於要怎麼知道有哪些圖示可以使用，每個圖示對應的名稱為何，就需要到 FontAwesome 的官方網站（https://fontawesome.com/）檢視了。

網速單位換算器中使用到的圖示#

回到網速單位換算器中，同樣需要先在 App.js 中註冊 React FontAwesome 會使用到的圖示：

// App.js
import React, { useState } from 'react';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
// ...

library.add(fab, fas, far);

function App() {
  /* ... */
}

接著，我們一共有兩個元件有使用到 FontAwesome 的圖示。

UnitControl#

第一個是 UnitControl 這個元件，在原本的 JSX 中我們有寫：

<!-- ./src/components/UnitControl.js -->
<i className="far fa-circle fa-stack-2x"></i>
<i className="fas fa-exchange-alt fa-stack-1x"></i>

這種寫法是一般使用 FontAwesome 的寫法，但因為現在是在 React 元件中使用 FontAwesome 提供的元件，就需要改成：

// ./src/components/UnitControl.js
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const UnitControl = () => (
  {/* ... */}
    <span className="exchange-icon fa-fw fa-stack">
      <FontAwesomeIcon icon={['far', 'circle']} className="fa-stack-2x" />
      <FontAwesomeIcon icon={['fas', 'exchange-alt']} className="fa-stack-1x" />
    </span>
  {/* ... */}
);

export default UnitControl;

UnitConverter#

在 UnitConverter 中，原本的 JSX 中有寫：

<span className="angle-icon fa-2x" style={{ marginTop: 30 }}>
  <i className="fas fa-angle-right"></i>
</span>

這同樣是一般 FontAwesome 的寫法，轉成 FontAwesome 的元件後會變成：

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

const UnitConverter = ({ handleInputChange, inputValue }) => (
  {/* ... */}
    <span className="angle-icon fa-2x" style={{ marginTop: 30 }}>
      <FontAwesomeIcon icon={['fas', 'angle-right']} />
    </span>
  {/* ... */}
);

現在圖示的部分就都可以正常顯示了！

Imgur

換你了：套用 React FontAwesome 元件#

現在換你透過 React FontAwesome 這個工具來套用 FontAwesome 所提供的圖示，你可以參考下方的步驟：

透過 npm 安裝 React FontAwesome 對應的套件
在 App.js 中註冊會使用到的 FontAwesome 圖示
在需要的元件中（UnitConverter 和 UnitControl）中將原本的 <i> 標籤改成使用 <FontAwesomeIcon /> 這個元件

本單元相關之網頁連結、完整程式碼與程式碼變更部分可於 apply-react-font-awesome 分支檢視：https://github.com/pjchender/learn-react-from-hooks-internet-speed-converter/tree/apply-react-font-awesome：

Imgur