在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 使用字体

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

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咖啡图标，通过<FontAwesomeIcon icon={faCoffee} />即可引入到页面。

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

比如，在入口App.js中：

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图标。

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

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>
)

3 添加更多字体样式或收费图标

fontawesome提供4种风格的字体图标: Solid、Regular、Light、Brands。

其中只有Light字体是完全收费的，Brands是完全免费的。所以使用上会碰到两个问题：

1. 怎么知道哪个图标在哪个字体库中？
2. 哪个图标是收费的，哪个是免费的？

除了品牌图标字体明确在@fortawesome/free-brands-svg-icons包中，其它图标的位置你可以通过fontawesome的字库搜索工具：Icons | Font Awesome。

你可以通过左侧分类进行初步检索。

也可以直接搜索，如搜索coffe图标：

其中，图标为灰色的即是收费图标，需要购买授权方可使用（问题2解决）。

点击一个图标进入图标详细页面：

页面中说明了该图标的风格及前缀，你可以引入对应的字体包文件来使用它（问题1解决）。

参考资料

• React | Font Awesome
• FortAwesome/react-fontawesome: Font Awesome 5 React component
• reactjs – Where do I find the object names of icons in the FontAwesome free packages? – Stack Overflow

往期推荐