如圖,項目要求實現的效果是這樣的:
然後我做出來的效果是這樣的:
很明顯三角形圖標不一致,因爲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>急 件</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>急 件</span></div>
這次總算實現了效果:
icon的名字是fa+原圖標名字(首字母大寫)
ps:前一種寫法爲什麼不出來知道原因的請告訴我。。。