问题
开发的时候遇到了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>