在React中使用FontAwesome图标字体

Font Awesome 是什么

Font Awesome是一套完美的图标字体库，它提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

Font Awesome是一个开源项目，当前版本为5.14，即将推出第6版本。现共提供1598个免费图标和7848个收费图标。

React中使用Font Awesome

fontawesome官网以及github项目主页把FontAwesome的使用说得很详尽，我这里重点概括一下，同时结合使用过程中遇到的问题，讲一下如何找到哪个字体在在哪个库。

1 安装

通过npm安装

npm i –save @fortawesome/fontawesome-svg-core \
@fortawesome/free-solid-svg-icons \
@fortawesome/react-fontawesome

通过yarn安装

yarn add @fortawesome/fontawesome-svg-core \
@fortawesome/free-solid-svg-icons \
@fortawesome/react-fontawesome

其中，@fortawesome/react-fontawesome 和 @fortawesome/fontawesome-svg-core 这两个包是图标字体基础文件， @fortawesome/free-solid-svg-icons 是图标字体样式风格文件。

2 使用字体

导入基础依赖，再导入字体库，即可使用。

1
2
3
4
5
6
7


import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

如上，从@fortawesome/free-solid-svg-icons中导出了faCoffee咖啡图标，通过即可引入到页面。

但是更好的做法应该是在入口的JS代码中一次性引入所需的图标，后面调用的时候就不需要每次都import了。

比如，在入口App.js中：

1
2
3
4
5
6


import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

其中library.add()添加的是：

fab：代表中的所有品牌图标 @fortawesome/free-brands-svg-icons。因此，该包中的任何品牌图标都可以在我们应用程序的其他任何位置通过图标名称作为字符串引用。例如："apple"，"microsoft"，或"google"。
faCheckSquare和faCoffee：分别添加每个图标，使我们可以在整个应用中分别通过图标字符串名称 "check-square"和来引用它们"coffee"。

所以，以上代码是指在入口处集中入引了所有品牌图标和checksquare、coffe图标。

后面使用中通过字符串的形式传入名字，不需要前缀。

1
2
3
4
5
6
7
8
9


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

export const Beverage = () => (
  <div>
    <FontAwesomeIcon icon="check-square" />
    Your <FontAwesomeIcon icon="coffee" /> is hot and ready!
  </div>
)