图标选择器之批量复制阿里云图标名称和图标代码

不想做设计的前端不是一个好的攻城狮

已于 2022-10-18 09:34:57 修改

阅读量616

点赞数

文章标签：阿里云 vue javascript

于 2021-08-10 18:13:59 首次发布

本文链接：https://blog.csdn.net/yuryS/article/details/119575863

版权

本文介绍了如何使用JavaScript代码快速复制阿里云图标库中的图标名称和代码，适用于需要大量图标的情况。只需在浏览器控制台运行提供的代码，即可一键获取图标列表，并以数组形式导出，方便后续使用。同时，提到了VueCLI中引用阿里Iconfont图标的步骤。

摘要由CSDN通过智能技术生成

在项目中需要做一个图标选择器，使用的是阿里云图标，所以需要复制阿里云项目里的全部图标名称和图标代码…一个项目中有几十甚至上百个图标，一个个复制会很费劲 O__O "…

F12打开控制台粘贴以下代码并回车

//图标代码
let icon = document.querySelectorAll('.icon-item >.icon-code-show');
//图标名
let name =document.querySelectorAll('.icon-item >.icon-name');
let p =[]
for (var i = 0 ; i < icon.length; i++) {
//数组这可以拼成自己想要的任意格式
p.push({
          name: name[i].innerHTML,
          iconname: icon[i].innerHTML,
        })
}
console.log(p)