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>