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

Irakli Tchigladze 2022年5月18日
在 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 代表超大號。它還接受數字值,這可以幫助你相對於其標準大小縮放圖示。你可以使用 2x6x 值之間的數值來相應地放大圖示。你還可以使用十進位制值。你還可以使用內聯樣式來更改 <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>;
}
Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn