首页分享动态引入阿里图标库 · 工作篇 · 看云

动态引入阿里图标库 · 工作篇 · 看云

来源：花匠小妙招时间：2025-05-13 17:36

[TOC] >[success] # 动态引入阿里图标库最近项目中加入了给菜单**选择图标**的功能，因为用[阿里图标](https://www.iconfont.cn/)的**链接方式**引入到项目中，如果想实现向下面一样**展示阿里图标库所有的图标**，有**2**种方法。 **第1种：单个去手动记录图标的class类名，整理成数组的形式进行在列表中循环**。 **第2种: 用ajax请求阿里图标的链接，链接会返回一个JSON字符串的一大串icon的类名的数据，需要写一个截取方法把所有class整合成数组的形式进行在列表中循环** ![](https://img.kancloud.cn/33/e1/33e1f3730ee63e3d24a542d21d4c7b24_975x698.png) <br> >[success] ## 截取class类名方法 ~~~ /** * 获取阿里图标列表 * @param {String} url 阿里巴巴图标URL */ getCssJson(url) { const xhr = new XMLHttpRequest() xhr.open('GET', url) xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { const css = JSON.parse(JSON.stringify(xhr.responseText)) let [,, ...iconArr ] = Object.keys(this.css2json(css)) // 去除掉class类名上的点 for(let i=0;i<iconArr.length;i++){ iconArr[i] = iconArr[i].replace('.','') } // 把远程图标跟本地图标合并 this.iconArr = [...iconArr, ...localIconList] || [...localIconList] } } xhr.send() }, /** * 将CSS形式的字符串转换为JSON * @param {String} css 字符串 */ css2json(css) { // 移除CSS所有注释 let open //开始注释 let close //结束注释 while ((open = css.indexOf('/*')) !== -1 && (close = css.indexOf('*/')) !== -1) { css = css.substring(0, open) + css.substring(close + 2) } // 初始化返回值 let json = {} while (css.length > 0) { // 存储第一个左/右花括号的下标 const lbracket = css.indexOf('{') const rbracket = css.indexOf('}') let declarations = css .substring(lbracket + 1, rbracket) .split(';') .map(e => e.trim()) .filter(e => e.length > 0) // 移除所有""空值 // 转为Object对象 declarations = this.toObject(declarations) let selectors = css .substring(0, lbracket) .split(',') .map(selector => { //去掉伪类 const signBracket = selector.indexOf(':') if (signBracket === -1) { return selector.trim() } else { return selector.substring(0, signBracket) } }) // 迭代赋值 selectors.forEach(selector => { // 若不存在，则先初始化 if (!json[selector]) json[selector] = {} // 赋值到JSON Object.keys(declarations).forEach((key) => { json[selector][key] = declarations[key] }) }) // 继续下个声明块 css = css.slice(rbracket + 1).trim() } // 返回JSON形式的结果串 return json }, toObject(array){ // 辅助方法：将array转为object let ret = {} array.forEach(e => { const index = e.indexOf(':') const property = e.substring(0, index).trim() const value = e.substring(index + 1).trim() ret[property] = value }) return ret } ~~~

vue复选框逻辑 get请求给后台传数组提交表单时传值参数处理方案 Element ui上传图片功能 async和await的使用时间戳转换日期格式转换时间戳时间戳转换日期格式对深拷贝的认知总结 vue-右键菜单功能 textarea中换行、回车、空格的识别与处理 element ui表格合并合并行（上下行）双层for循环数组去重瀑布流前端多条件筛选闭包的理解改变this指向 vue单选框逻辑对象数组根据某个属性来进行排序 vscode插件整理对象数组多条件去重 Blob类型数据转换Json数据类型 Element ui做批量上传功能前端cookie和后端cookie 强制转换https协议给事件传额外参数树形结构数据处理查找所有父级数据根据id筛选单条数据动态引入阿里图标库四舍五入封装一个Promise.allSettled方法判断输入框内是否有emoji表情 element-ui的popover组件位置偏移 formData上传文件时，携带【数组对象参数】前端解压压缩包（zip）解压后上传解压的文件 element ui表格列相同解决办法 elementUI，table复选框多选，翻页/切换条数时保持选中状态 cookie 和 token 的区别