html中引入的图标库,动态引入阿里图标库

[TOC]

>[success] # 动态引入阿里图标库

最近项目中加入了给菜单**选择图标**的功能，因为用[阿里图标](https://www.iconfont.cn/)的**链接方式**引入到项目中，如果想实现向下面一样**展示阿里图标库所有的图标**，有**2**种方法。

**第1种：单个去手动记录图标的class类名，整理成数组的形式进行在列表中循环**。

**第2种: 用ajax请求阿里图标的链接，链接会返回一个JSON字符串的一大串icon的类名的数据，需要写一个截取方法把所有class整合成数组的形式进行在列表中循环**


>[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

}

~~~