- 由于是第一次在react項(xiàng)目中使用iconfont永票，所以我一開始使用的并不是通過symbol屬性引入的圖標(biāo)，而是通過font class的方式驮俗，通過這樣的方式雖然也可以成功將圖標(biāo)引入到項(xiàng)目中备典，但是最后你會(huì)發(fā)現(xiàn)一個(gè)問題：圖標(biāo)沒有顏色，即使原本在iconfont上五顏六色的圖標(biāo)意述，到了項(xiàng)目中也是黑白的提佣，在我百度了許久之后成功的解決了黑白圖標(biāo)的問題，步驟如下：
一荤崇、打開iconfont搜索圖標(biāo)并且添加到購物車
添加到購物車.png
二拌屏、將購物車中的圖標(biāo)添加到項(xiàng)目中，若是新項(xiàng)目术荤，則可以新建項(xiàng)目倚喂，并將圖標(biāo)添加進(jìn)去
添加至項(xiàng)目.png
新建項(xiàng)目.png
三、選擇symbol方式瓣戚，點(diǎn)擊生成在線鏈接
image.png
四端圈、將生成的鏈接復(fù)制到react項(xiàng)目public目錄下index.html文件中，通過script標(biāo)簽引入子库，需要注意的是要加上鏈接的前綴http:
完整鏈接如下：
<script src="http://at.alicdn.com/t/font_1952298_yxs12560py.js"></script>
五舱权、在項(xiàng)目中需要使用到圖標(biāo)的地方用以下svg標(biāo)簽方式引入
<svg className="icon" aria-hidden="true">
<use xlinkHref="#icon-wangyueche"></use>
</svg>
其中xlinkHref屬性中#后面的就是iconfont中給我們的類名，只要把對(duì)應(yīng)的類名寫到這仑嗅，頁面中就能顯示出圖標(biāo)宴倍，但是沒有設(shè)置基礎(chǔ)樣式，所以看起來有點(diǎn)小仓技，
我的icon類名樣式是這樣寫的
.icon {
width: 2em;
height: 2em;
fill: currentColor;
display: block;
}
-
大家可以根據(jù)自己項(xiàng)目的需要來修改樣式成想要的樣子
下面是結(jié)果：
結(jié)果.png
