在react组件里边使用fontawesome

初衷

公司设计师的图标不太好用，我想找一个全能的图标库，各种UI框架自带的图标库实在贫瘠，于是我花了一个上午去百度。
最后找到了两个比较全能的图标库，一个是iconfont，一个是fontawesome。经过一些尝试，最后我选择了fontawesome。因为iconfont还需要各种下载操作，感觉很麻烦，而fontawesome只需要命令行papapa
这里是英文教程传送门

开始安装

npm

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

yarn

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

引入到组件中

import React, { Component } from "react";
import { Row, Col, Icon  } from "antd";

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

class Footer extends Component {

  render() {
    return (
      <div className="footer">
        <FontAwesomeIcon icon={faAddressCard} />
      </div>
    );
  }
}

export default Footer;

有个地方需要注意，图标的名字用小驼峰，图标前面需要加 fa，比如 fa-address-card => faAddressCard