React怎麼用Font Awesome Icon？How to Use Font Awesome Icon in React Project?

不用CDN引入的方式，在專案中使用Font Awesome Icon。

前幾天想說用CDN直接引入，但index.html一直沒有吃到QAQ

後來就直接npm import ，紀錄一下怎麼用。

1. 全部裝一裝

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

2. import

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { fas } from "@fortawesome/free-solid-svg-icons";

3. use

<FontAwesomeIcon icon={fab.faFacebookSquare}/>
<FontAwesomeIcon icon={fab.faInstagramSquare}/>

icon={總類.名稱}

名稱的規則是把她轉為駝峰

原本長這樣 <i class=”far fa-address-card”></i> =>

改成 icon={far.faAddressCard}

完成 ٩(ˊᗜˋ )و