简介

Font Awesome 是一个基于CSS和LESS的字体和图标工具套件，常常能够在HTML中加入一些图标，但是在React中是使用JSX来撰写HTML的物件，它与一般的HTML不一样所以无法直接使用Font Awesome，本篇介绍如何利用别种方法在React中使用Font Awesome。

react-fontawesome

安装

Using NPM:

npm i --save @fortawesome/fontawesome-svg-corenpm i --save @fortawesome/free-solid-svg-iconsnpm i --save @fortawesome/react-fontawesome

Yarn:

yarn add @fortawesome/fontawesome-svg-coreyarn add @fortawesome/free-solid-svg-iconsyarn add @fortawesome/react-fontawesome

使用

在import中需要引入需要的图标名称，输入的规则 : 若名称为fas fa-ato 则import {faAtom}

import React from "react";import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'import { faAtom } from '@fortawesome/free-solid-svg-icons'class App extends React.Component{    render()    {        return(            <div className="icon">                <FontAwesomeIcon icon={faAtom} />            </div>        )    }}export default App;

结果 :

改变样式

使用Font Awesome所提供的Icon组件有支援SASS来更改其样式。

.icons{    svg{        color: #000;        width: 50px;        height: 50px;    }}

结果 :

react-icons

安装

Using NPM :

npm install react-icons --save

Yarn :

yarn add react-icons

使用

在 react-icons 官网中可以使用多种类型的图案，而不同种类的图案也需要import不同的Component。

import React from "react";import { BsFillArchiveFill  } from "react-icons/bs";class App extends React.Component{    render()    {        return(            <div className = "icon">                <BsFillArchiveFill />            </div>        )    }};export default App;

结果 :

改变样式

使用react-icons功能依样能够使用SASS来改变其样式

.icons{    svg{        color: #00f;        width: 50px;        height: 50px;    }}

结果 :

参考资料 :
react-fontawesome/GitHub
react-icons/GitHub
react-icons