在 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