• 由于是第一次在react项目中使用iconfont，所以我一开始使用的并不是通过symbol属性引入的图标，而是通过font class的方式，通过这样的方式虽然也可以成功将图标引入到项目中，但是最后你会发现一个问题：图标没有颜色，即使原本在iconfont上五颜六色的图标，到了项目中也是黑白的，在我百度了许久之后成功的解决了黑白图标的问题，步骤如下：

一、打开iconfont搜索图标并且添加到购物车

添加到购物车.png

二、将购物车中的图标添加到项目中，若是新项目，则可以新建项目，并将图标添加进去

添加至项目.png

新建项目.png

三、选择symbol方式，点击生成在线链接

image.png

四、将生成的链接复制到react项目public目录下index.html文件中，通过script标签引入，需要注意的是要加上链接的前缀http:

完整链接如下：

<script src="http://at.alicdn.com/t/font_1952298_yxs12560py.js"></script>

五、在项目中需要使用到图标的地方用以下svg标签方式引入

<svg className="icon" aria-hidden="true">
           <use xlinkHref="#icon-wangyueche"></use>
</svg>

其中xlinkHref属性中#后面的就是iconfont中给我们的类名，只要把对应的类名写到这，页面中就能显示出图标，但是没有设置基础样式，所以看起来有点小，
我的icon类名样式是这样写的

.icon {
    width: 2em;
    height: 2em;
    fill: currentColor;
    display: block;
}

• 大家可以根据自己项目的需要来修改样式成想要的样子
  下面是结果：

  
  
  结果.png