---

前言

阿里巴巴矢量图标库作为国产的图标库，使用人数多，图标也很丰富，但在功能上还是有改进的地方的……

如最近我在使用的过程中就遇到一个下载图标的问题，阿里巴巴是图标库它是有批量操作功能的，但只能加入到购物车再进行下载，而这种操作既麻烦又有数量限制，要么就逐个下载更不可取。或许你会说把Font class字体文件下载至本地再去使用（仔细一点你会发现阿里巴巴是图标库是有作处理的，下载的字体文件里的svg文件的图标都是倒过来的）……但是需求不一样呀，这里我是需要用svg图标文件，所以还是让我们一起探讨如何解决批量下载的问题吧。

遇到这个问题，自己便轻车熟路的百度了起来，然而只找到一篇比较有参考价值的文章《阿里巴巴矢量图标库批量下载》（大概思路就是通过控制台写js代码执行脚本进行下载）……于是自己也就顺藤摸瓜的改写一通便有了此文。

---

如何批量下载阿里巴巴矢量图标？

1.打开阿里巴巴矢量图标库的项目

https://www.iconfont.cn/manage/index?manage_type=myprojects

2.按F12打开浏览器的开发者工具执行自动下载图标的代码

注：建议在执行前把浏览器的下载提示关掉，并指定好下载路径，否则还要手动点击确定

代码如下：

// 保存本地文件
function saveLocalFile(content, fileName) {let downLink = document.createElement('a')downLink.download = fileNamedownLink.style.display = 'none'let blob = new Blob([content])downLink.href = URL.createObjectURL(blob)document.body.appendChild(downLink)downLink.click()document.body.removeChild(downLink)
}// 批量下载阿里巴巴矢量图标
function downloadIconfont() {// 获取当前项目的图标let iconList = document.querySelectorAll('.project-iconlist .icon-item')console.log('当前项目的图标数量：' + iconList.length)iconList.forEach(function (item, index) {// 添加定时器去下载，否则最多下载10个。至于间隔时间可自己把握setTimeout(() => {// 获取图标svg内容let svg = item.children[0].innerHTML// 获取图标名称作为svg文件名let fileName = item.children[1].innerText + '.svg'saveLocalFile(svg, fileName)}, 1000 * index)})
}// 执行批量下载阿里巴巴矢量图标
downloadIconfont()

---

PS：其实这里我还有一个想法的，就是使用jszip将图标打包下载，但是有遇到一个跨域问题，然后也没有花这么多时间深究缘由…大家感兴趣的可以试试！

至此，批量下载阿里巴巴矢量图标的解决方案到此结束。