在 React 應用程式中使用 FontAwesome 圖示

你可能沒有意識到，但圖示和徽標是現代應用程式的重要組成部分。在 React 中構建介面時，開發人員可以使用許多不同的工具包和包含圖示的包。FontAwesome 是最好的選擇之一，因為它提供了各種各樣的圖示。FontAwesome 背後的團隊也努力將圖示整合到 React 生態系統中。

在 React 中使用 FontAwesome

為 React 選擇一個 FontAwesome 圖示

一旦你確定了你的應用程式需要什麼型別的圖示，你可以在 Font Awesome Icons 頁面上搜尋相關的關鍵字來找到合適的東西。你在左側看到的過濾器對於縮小選擇範圍至關重要。他們可以幫助你找到你正在尋找的確切內容，更重要的是，告訴你需要安裝哪個 FontAwesome 包。

要安裝常規圖示，請在命令列中執行以下命令：

npm install --save @fortawesome/free-regular-svg-icons

要探索你可以安裝的所有不同軟體包，請檢視本指南。

建立庫

隨著應用程式的增長，你將需要許多不同檔案中的圖示。一遍又一遍地匯入相同的圖示可能會讓人筋疲力盡。相反，你可以在一個 JavaScript 檔案中匯入你需要的每個圖示，你將在其中建立一個 FA 庫。

通常將你的圖示庫儲存在 src 資料夾中。該庫應包含整個 React 應用程式中使用的所有圖示。完成後，將庫匯入父元件（通常是 App.js），以便所有子元件都可以訪問它。

這是一個簡單的圖示庫的樣子：

import { library } from '@fortawesome/fontawesome-svg-core';
// import the necessary icons
import { faCoffee, faCheckSquare  } from '@fortawesome/pro-solid-svg-icons';

library.add(
  faCoffee,
  faCheckSquare,
);

使用 <FontAwesomeIcon/>

react-fontawesome 包包含一個 <FontAwesomeIcon /> 自定義元件，該元件明確建立以在 React 應用程式中使用 FA 圖示。單獨的元件方法可以為你提供效能提升並最小化整個包的大小。

要使用 <FontAwesomeIcon/> 元件，你必須安裝 react-fontawesome 包。你還需要匯入特定的圖示。例如，如果你要使用 Twitter 徽標，則需要匯入 faTwitter 圖示。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';

class App extends Component {
  render() {
    return <FontAwesomeIcon icon={ faTwitter }/>
  }
}

icon 屬性是最重要的，但其他屬性可以幫助你自定義圖示。

size 屬性接受許多不同的值 - sm 代表小號，md 代表中號，lg 代表大號，而 xl 代表超大號。它還接受數字值，這可以幫助你相對於其標準大小縮放圖示。你可以使用 2x 和 6x 值之間的數值來相應地放大圖示。你還可以使用十進位制值。你還可以使用內聯樣式來更改 <FontAwesomeIcon /> 元件的外觀。

使用 className

如果你正在使用 create-react-app CLI 開發 React 應用程式，你可以使用 className 屬性來顯示圖示。如果你來自其他框架或語言，這很可能是你習慣使用 FontAwesome 的方式。

不要忘記，在 JSX 語法中，你必須使用 className 屬性，就像常規 DOM 一樣。這是必要的，因為 JavaScript 中的 class 是一個保留字。

一旦你安裝了 font-awesome 庫，你必須將它匯入到 index.js 檔案中。該檔案必須包括：

import 'font-awesome/css/font-awesome.min.css';

匯入圖示樣式後，你可以在 JSX 中使用常規的 className 語法：

 render: function() {
    return <span><i className="fa fa-address-card fa-amazon">Icon</i></span>;
}