阿里妈妈 iconfont 批量加入/获取批量名称

1 背景

因为项目中，使用的的图标库已经不够使用了。Avue 使用的是Element.js 版本。所以需要引入外部图标库进行使用。最后选到阿里妈妈图标库。

2 解决

2.1 选择图标

登录阿里妈妈：https://www.iconfont.cn/
我这边选择的是Ant-design 图标库

这里有个很不好的地方，就是没有全选功能。不过后面想了下，应该阿里妈妈的理念是按需索取。所以没有提供全部选项。该图标库有600个。如果一个一个点不太现实。所以在管控台找了个脚本执行了下。

// 阿里妈妈 选择全部图标
var icons = document.querySelectorAll('.icon-gouwuche1');
// 使用 setTimeout 启用多线程来进行点击 目前使用间隔时间为17毫秒
var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 17); } };
auto_click(0);

执行后

2.2 添加到项目中

在购物车中，可以创建一个项目，将选中的图标放入你的项目中。
图示，已经选好了。

这个时候，你的项目中就有你刚刚选中的图标。我这边选择的在线链接 / Font class 的方式。

在项目中，index.html引入

PS:如果不需要批量导入名称预览，则不需要下面一步。

2.3 批量获取icon名称

在界面中要一个一个获取，但是效率太低了，毕竟600个。后面观察了一下DOM，写了一段脚本，在管控台执行，可以拿到想要的name。脚本如下：

// 获取iconfont 的名称	
var iconCodeList = []	
var iconDomlist = document.querySelectorAll('.block-icon-list')[1].querySelectorAll('li')
var getIconCode = function(i) {
	if (i < iconDomlist.length) { 
		setTimeout(function() {
			let iconCode = iconDomlist[i].querySelector('.icon-code-show').innerText
			iconCodeList.push(`iconfont ${iconCode}`)
			console.log(i, iconCode)
			getIconCode(i + 1); 
			}, 10); 
	} 
}
	getIconCode(0)
	console.log(iconCodeList)

但是很遗憾，你直接copy到代码使用，这种consloe 也是不能开箱即用。遂找看看有没有方案，可以将Console 下载下来。

2.4 批量下来icon名称

预先执行以下代码：

(function (console) {
    console.save = function (data, filename) {
        let MIME_TYPE = "text/json";
        if (!data) return;
        if (!filename) filename = "console.json";
        if (typeof data === "object") data = JSON.stringify(data, null, 4);

        let blob = new Blob([data], { tyoe: MIME_TYPE });
        // 创建事件
        let e = document.createEvent("MouseEvent");
        // 创建一个a链接
        let a = document.createElement("a");
        // 设置a链接下载文件的名称
        a.download = filename;
        // 创建下载的URL对象（blob或者file）
        a.href = window.URL.createObjectURL(blob);
        a.dataset.downloadurl = [MIME_TYPE, a.download, a.href].join(":");
        // 初始化事件
        e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        // 触发事件
        a.dispatchEvent(e);
    }
})(console)

// 执行代码
// console.save(数据, 文件名)
console.save(iconCodeList, 'iconCodeList.js')

直接结果如下：


这里就可以直接复制600个icon的名字到刚才的配置文件中去。

完事。

---

3 其他

自己目前build项目到开发环境和SIT环境可以正常使用，如果不能正常使用的话，后续会考虑现在静态文件。