在React中使用FontAwesome字体

FontAwesome是一种图标字体。

安装依赖

1. 安装基础依赖

npm i --save @fortawesome/fontawesome
npm i --save @fortawesome/react-fontawesome

2. 安装样式依赖

npm i --save @fortawesome/fontawesome-free-solid
npm i --save @fortawesome/fontawesome-free-regular
npm i --save @fortawesome/fontawesome-free-brands

注意：

• 免费版支持三种样式：solid、regular和brands，后面在使用图标时根据样式的不同也会有不同的前缀

使用方法

import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

 <FontAwesomeIcon icon={faCoffee} />

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

这里将引入的代码封装在FontAwesomeUtil.js中，那么入口处import这个文件即可。

import fontawesome from '@fortawesome/fontawesome'

import {
    faShare,
    faComment
} from '@fortawesome/fontawesome-free-solid'

fontawesome.library.add(
    faShare,
    faComment
)

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

<FontAwesomeIcon icon="share" />