使用 Fontawesome 的 React 组件

Fontawesome 是一套图表字体库框架，我们经常在项目中用到它的各式各样的图标，本文介绍的是如何使用其 React 组件形式的包应用到项目中。

安装

使用 npm 命令来安装 react-fontawesome 包。

npm install react-fontawesome --save

导入 css

在项目的 head 标签中的导入 fontawesome 的 css 样式表。以下我给出的是一个 CDN 的地址，你可以自己找其他地址。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

使用

在某个组件中，你只需要先导入 react-fontawesome 包。然后直接把它的组件写上去就可以了。

import FontAwesome from 'react-fontawesome';

比如我们要显示一个向上的箭头图标，就像下面一样在 render 函数中调用即可。

<FontAwesome
  name='angle-double-up'
  style={{ fontSize: "17px" }}
/>

name 属性就是你要用的 icon 的名字，一般官网给出的 icon 名字都带有 fa- 前缀，你去掉就可以了。stype 就是你给图标设置的样式。这个就用不多说了。

相关