前言

阿里巴巴矢量图标库作为国产的图标库，使用人数多、图标也很丰富。但在功能上还是有改进的地方的，如最近我在使用的过程中就遇到批量下载矢量图标的问题……

在网上找了好几篇文章，然而基本上都是千篇一律的，无疑的是通过浏览器的控制台写js去下载图标是必然的途径……

虽然阿里巴巴矢量图标库是有批量操作的功能，但只能加入到购物车再下载，而这种操作既麻烦又有一次最多下载20个图标的数量限制，要么就逐个下载更不可取。或许你可以把Font class字体文件下载到本地再去使用，但这里我们主要探讨如何一次性下载20个以上的svg图标文件。

Iconfont图标批量下载20个以上要如何实现？

1.解决思路

通过js代码获取阿里巴巴矢量图标库页面中的svg标签，然后使用文件流将其下载到本地。

2.实现方法

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

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

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

tips：可以把浏览器的下载提示关掉并指定好下载路径，否则每次下载图标还要手动确认下载

直接批量下载阿里巴巴矢量图标的js代码如下：

// 保存本地文件
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文件名。这里给文件名取时间戳作为后缀，可防止覆盖下载重名的svg图标let fileName = item.children[1].innerText + '_' + new Date().getTime() + '.svg' saveLocalFile(svg, fileName)}, 100 * index)})
}// 执行批量下载阿里巴巴矢量图标
downloadIconfont()

导出阿里巴巴矢量图标并压缩的js代码如下：

// 将js的引用写入到阿里巴巴矢量图标库的网站上会有跨域问题。
// 如果需要下载打包的，需将这个网址的第13行代码（即整个jszip.min.js的代码）拷贝进来。
// https://github.com/Stuk/jszip/blob/master/dist/jszip.min.js// 导出阿里巴巴矢量图标（压缩包）
async function exportIconfont() {// // 引入jszip.min.js // let script = document.createElement('script');// script.src = "https://github.com/Stuk/jszip/blob/master/dist/jszip.min.js";// document.getElementsByTagName('head')[0].appendChild(script);let iconList = document.querySelectorAll('.project-iconlist .icon-item')console.log('当前项目的图标数量：' + iconList.length)let zip = new JSZip()const currDate = new Date()const dateWithOffset = new Date(currDate.getTime() - currDate.getTimezoneOffset() * 60000)// 修复jszip插件打包文件或文件夹的修改时间有误的BUGJSZip.defaults.date = dateWithOffsetlet count = 0await iconList.forEach(item => {let svg = item.children[0].innerHTMLlet fileName = item.children[1].innerText + '.svg'while(zip.files[fileName]){// 重命名同名的图标count++;fileName = item.children[1].innerText + count + '.svg'}let svgBlob = new Blob([svg])// 往zip压缩包的icon文件夹添加svg文件zip.folder('icon').file(fileName, svgBlob)count = 0})// 生成zip文件并下载zip.generateAsync({type: 'blob'}).then(function (content) {let projectName = document.querySelectorAll('.project-top .top-title')let fileName = projectName[0].textContent + '.zip'saveLocalFile(content, fileName)})
}// 执行导出阿里巴巴矢量图标（压缩包）
exportIconfont()

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

阿里巴巴矢量图标批量下载相关推荐

如何使用阿里巴巴矢量图标库下载使用字体图标？
1:在百度搜索"阿里巴巴矢量图标库"进入,注册并登录. 2:搜索自己想要的字体图标,然后加入购物车,点击添加至项目. 3:在项目中点击下载至本地,解压缩包. 4:如下图所示,使用l ...
使用阿里巴巴矢量图标库下载图标代码
1.阿里巴巴矢量图标库官网:地址 2.使用微博或github账号登入 3.在下图或右上角搜索你需要的图标: 4.点击选中的图标,加到购物车 5.点击右上角购物车,并添加到项目 6.可以右上角新建项目, ...
阿里巴巴矢量图标库批量下载图标
阿里巴巴矢量图标库是前端工程师常用到的一个网站.网址:阿里巴巴矢量图标库但是每次下载图标都要挨个点击一下下载按钮,页面不提供批量下载. 操作起来很不方便. 后来我在网上查询,总算找到批量下载的方法, ...
还在为找不到好看的图标发愁？阿里巴巴矢量图标库全部免费下载
阿里巴巴矢量图标库矢量图标.精美插画免费下载地址
阿里巴巴矢量图标库iconfont的使用
场景工作中如果用到常用的一些图片去哪寻找. 阿里巴巴矢量图标库: https://www.iconfont.cn/home/index 注: 博客主页: https://blog.csdn.net/ ...
阿里巴巴矢量图标库使用步骤
1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地. 2.解压文件. 3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/icon ...
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
1.显示效果 2.实现步骤进入阿里巴巴矢量图标库搜索想要的矢量图标并加入购物车,点击右上角购物车将图标添加至项目更改项目设置将字体格式设置为TTF Base64 点击下载至本地在微信小程序 ...
阿里巴巴矢量图标库icon图标在线引用
阿里巴巴矢量图标库icon图标在线引用写代码有时候不方便下载图标的时候可以直接引用阿里巴巴矢量图标库的图标,放在代码内具体步骤如下: 1.进入阿里巴巴矢量图标库选择需要的图标: 2.点击加入购物车 ...
Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库
最近在使用vue-element-admin开源项目进行系统开发,但是在引入第三方图标库的时候,出现了一些问题,百度找了找,也没有找到自己想要的答案,最后经过多次尝试,将问题解决.所以特此记录一下,以 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...

阿里巴巴矢量图标批量下载

文章目录

前言