React中fontawesome图标库的使用步骤

发表于 更新于 分类于 阅读次数：

使用的是最新版svg的，之前版本使用的的font icon

一、安装依赖

1
2
3
4
5
npm i --save @fortawesome/fontawesome-svg-core

npm i --save @fortawesome/react-fontawesome

npm i --save  @fortawesome/free-solid-svg-icons

二、组件中引入

和官网的图标名有点不一样，比如官网的图标名是coffee，这里因为就应该是faCoffee

1
2
3
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'

import {faCoffee} from '@fortawesome/free-solid-svg-icons'

三、组件中使用

1
<FontAwesomeIcon icon ={faCoffee} />

四、图标以字符串形式引入的方式

  1. 添加指定的图标
    例子:
    引入的faCoffee，使用的时候变成coffee，就是去掉fa，然后小写
    1
    2
    3
    4
    5
    6
    import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
    import { library } from "@fortawesome/fontawesome-svg-core";
    import { faCoffee } from '@fortawesome/free-solid-svg-icons'
    library.add(faCoffee);

    <FontAwesomeIcon icon ="coffee" />
  2. 添加所有的图标
    例子：
    用的是fas参数
1
2
3
4
5
6
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas);

<FontAwesomeIcon icon ="coffee" />