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/) 主要解決組件出現和退出時的動畫效果，其原理就是通過添加類名實現組件的不同狀態。 安裝： ```markup npm install react-transition-group --save npm install @types/react-transition-group --save ``` ## 二次封裝