[TOC]
>[success] # 动态引入阿里图标库
最近项目中加入了给菜单**选择图标**的功能,因为用[阿里图标](https://www.iconfont.cn/)的**链接方式**引入到项目中,如果想实现向下面一样**展示阿里图标库所有的图标**,有**2**种方法。
**第1种:单个去手动记录图标的class类名,整理成数组的形式进行在列表中循环**。
**第2种: 用ajax请求阿里图标的链接,链接会返回一个JSON字符串的一大串icon的类名的数据,需要写一个截取方法把所有class整合成数组的形式进行在列表中循环**
![](https://img.kancloud.cn/33/e1/33e1f3730ee63e3d24a542d21d4c7b24_975x698.png)
>[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[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
}
~~~