react 关于iconfont图标应用和动态图标

问题

开发的时候遇到了antd的icon无法使用的问题，百度无果，改用iconfont。又遇到了图标静态不知如何旋转的问题，百度后发现用css修改即可。

解决方法

1. 首先把要用的图标拉入iconfont的购物车，并添加到iconfont的项目分组中

var icon=document.getElementsByClassName('icon-gouwuche1');for(var i=0;i<icon.length;i++){icon[i].click();}

通过上面这行代码可以全选（需要等待，卡屏是正常的）加入购物车，在购物车（位于右上角）中打开，点击添加到项目分组

3. 复制symbol代码
点击复制代码
4. 在react项目的public的index.html中引入symbol

在index.html中添加如下代码

<script src="//at.alicdn.com/t/font_1917586_lcqaup3ir7.js"></script>

5. 同样在index.html文件中添加css代码

<style>
      .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
</style>

6.在需要的地方添加icon模块

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

7.关于让图片动起来
在index.html的style中添加一个类 设置transform属性即可。
需要的图标的className中添加这个类名即可

.icon.iconTrans {
        display: inline-block;
        animation: move 1.2s linear infinite;
        -webkit-animation: move 1.2s linear infinite;
      }
@keyframes move {
      100% {
          transform: rotate(360deg);
      }
}
<svg className="icon iconTrans"  aria-hidden="true">
     <use xlinkHref="#icon-loading"></use>
</svg>