react使用FontAwesome字圖標庫

如圖,項目要求實現的效果是這樣的:

然後我做出來的效果是這樣的:

很明顯三角形圖標不一致,因爲antDesign的<Icon>圖標只有這個:

在找字圖標的途中看到FontAwesome有這種字圖標,決定拿來用,於是照着文檔來引用:

https://github.com/FortAwesome/react-fontawesome

首先把Webstore切到Terminal,輸入命令安裝:

npm i --save @fortawesome/pro-solid-svg-icons@prerelease
npm i --save @fortawesome/pro-regular-svg-icons@prerelease
npm i --save @fortawesome/pro-light-svg-icons@prerelease

文檔上這麼寫的:

我也照着寫:

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

<div className={style.warning}><FontAwesomeIcon icon="exclamationTriangle" className={style.icon}/><span>急&nbsp;&nbsp; 件</span></div>

其中className是less樣式名的寫法,這應該是沒有問題的,但是效果卻:

我的圖標呢!我的圖標呢!檢查了圖標名字沒有錯,但是它就是不出來,後面換了種寫法:

import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import faExclamationTriangle from '@fortawesome/fontawesome-free-solid/faExclamationTriangle'

<div className={style.warning}><FontAwesomeIcon icon={faExclamationTriangle} className={style.icon}/><span>急&nbsp;&nbsp; 件</span></div>

這次總算實現了效果:

icon的名字是fa+原圖標名字(首字母大寫)

ps:前一種寫法爲什麼不出來知道原因的請告訴我。。。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章