Saber增加自定义iconfont图标

Saber

收藏生成海报

 1  2256

小狐狸 2019-09-06 12:49

阅读需：0

总感觉图标太少了,写篇文章来记录下增加iconfont图标,首先放出效果图:

首先在iconfont上挑选好自己要添加的图标添加到一个项目

批量添加iconfont图标到购物车代码:

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

在图标库页面打开调试,然后在控制台上输入上面的代码执行,会发现整个图标库的图标都添加到购物车了,然后可以从购物车添加到一个项目,如图:

其中红框标注的是我们需要的,在Saber项目的src/config/env.js文件中添加上图红框标注的内容,添加完如下图:

添加完成之后先提取图标库的所有图标名称

在iconfont项目图标列表界面,也就是上面截图的那个界面打开控制台输入:

var obj = document.getElementsByClassName("icon-code icon-code-show");
var list = new Array();
for (var i = 0; i < obj.length; i++) {
  list[i] = obj[i].innerText;
}
console.log(JSON.stringify(list));

然后就能打印所有图标名称了,复制图标名称数组字符串到记事本工具,然后执行替换

搜索: "icon- 替换为 "iconfont icon-

然后在搜索 ", 替换为 ",\n

然后得到结果如下图:

然后在Saber项目的src/config/iconList.js文件里添加图标列表,如下图:

OK,iconfont图标添加完毕,刷新后看看效果吧

var iconCodeList = document.querySelectorAll('.block-icon-list > .icon-item > .icon-code-show'); for (var i = 0; i < iconCodeList.length; i++) { console.log(iconCodeList[i].innerText); }