fontIcon 和 Inline SVG 的比较： - SVG 完全可控 - SVG 即取即用，Font Icon 要下载全部字体文件 - Font Icon 有很多奇怪的 Bug # react-fontawesome [https://github.com/FortAwesome/react-fontawesome](https://github.com/FortAwesome/react-fontawesome) ## Installation ```markup $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/react-fontawesome ``` 使用示例： ```javascript import ReactDOM from 'react-dom' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCoffee } from '@fortawesome/free-solid-svg-icons' const element = <FontAwesomeIcon icon={faCoffee} /> ReactDOM.render(element, document.body) ``` 有时候我们要使用多个图标，依次导入会很麻烦，可以使用如下方式导入所有图标。 ```javascript import ReactDOM from 'react-dom' import { library } from '@fortawesome/fontawesome-svg-core' import { fab } from '@fortawesome/free-brands-svg-icons' import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons' library.add(fab, faCheckSquare, faCoffee) ``` ## 二次封装 如果我们希望对图标设置我们自己的主题色。 # 动画解决方案 推荐 React Transition Group [https://reactcommunity.org/react-transition-group/](https://reactcommunity.org/react-transition-group/) 主要解决组件出现和退出时的动画效果，其原理就是通过添加类名实现组件的不同状态。