antd的Icon組件可以使用自定的的 iconfont ^-^
具體使用:
- 1 進(jìn)入iconfont (https://www.iconfont.cn/)圖標(biāo)管理-我的項(xiàng)目中宅广,Symbol下點(diǎn)擊生成代碼赔蒲,如果暫時(shí)沒有項(xiàng)目题涨,右側(cè)有新建項(xiàng)目按鈕,想使用什么圖標(biāo)直接添加進(jìn)去即可
image.png
點(diǎn)擊上圖中的生成代碼 袒啼,代碼生成~~~
image.png
- 2 寫入通用js,scriptUrl的值就是剛剛生成的鏈接
export const MyIcon = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_393108_********.js', // 在 iconfont.cn 上生成
});
調(diào)用的時(shí)候,用法跟Icon組件使用一致烁落,寫入對應(yīng)的type值鸟蜡,圖標(biāo)庫中hover會有復(fù)制代碼膜赃,復(fù)制以后寫入type
image.png
import {MyIcon} from './common'
<Link to=''>
<MyIcon type='icon-shangpin'></MyIcon>
<span>商品分類</span>
</Link>
image.png