html中引入的图标库,动态引入阿里图标库
[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
}
~~~
html中引入的图标库,动态引入阿里图标库相关推荐
- java怎么引入矢量图标库,阿里图标库怎么使用?阿里图标库iconfont如何使用
阿里图标库怎么使用?阿里图标库iconfont如何使用 网际网络测评 网络评测 2020-3-17 2581 0评论 阿里图标库Iconfont-国内功能很强大且图标内容很丰富 ...
- 如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程
如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程 作者:张国军_Suger 开发工具与关键技术:Win10.项目.图标 对于编程人员来说,有一个不可获取的图库就是阿里图标库,这 ...
- Naive 组件库 动态渲染icon图标
使用Naive组件库默认你已经安装了对应的icon图标库 没有安装的参考链接安装 点击传送 Naive组件动态渲染Icon图标 主要是使用 component Vue内置组件来渲染对应的icon组件, ...
- iconfont 图标转为字体_阿里字体库iconfont使用方法
天兴工作室之前写过一篇"zblog使用Font Awesome图标字体教程",然后发现"Font Awesome"太臃肿了,一个主题根本用不了这么多图标,图标样 ...
- 【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
方式一 : 下载svg导入 优点:操作方便,支持多彩图标 缺点:会增加源代码大小 下载 svg 格式的图标图片,放入源码中使用 小程序项目中的路径为 assets\icon\美食.svg 使用时-代码 ...
- python安装pyecharts库_python安装阿里云库pyecharts 安装不上,求大佬指点一下-问答-阿里云开发者社区-阿里云...
import pyecharts as pec car=pec.Bar("阿斯旺","阿迪斯",width=1280,height=720) car.add([ ...
- uni-app引入阿里图标
个人博客 今天刚好用uni-app在开发一个多端应用,在开始引用图标时不知道如何引入多端应用的图标,后来用阿里图标解决了,在此记录下解决的方法 去阿里图标官网下载阿里图标,选择unicode 2.复制 ...
- 阿里图标字体库的动态使用Android
android里的图标之前一直都是使用图片,一个图标需要不同尺寸的几张图片,无形的会增大资源包,而阿里图标字体库是矢量的,使用的是字符,可以使安装包变得更轻量,于是决定使用阿里图标字体库 . 传送门: ...
- vue项目中阿里图标的使用
vue项目中阿里图标的使用 在项目中使用阿里图标,先去阿里图标网站(https://www.iconfont.cn/),找到自己想要的图标,添加到一个新建项目中,然后选择Font class,点击下载 ...
- Android 动态使用Iconfont图标
Android 动态使用Iconfont图标 Android 动态使用Iconfont图标 问题 思路 附 Android 动态使用Iconfont图标 问题 每当进行增删操作后,Iconfont图标 ...
最新文章
- 保护SNMP协议服务安全的三个步骤
- mobile还有人用吗 spring_话说,苹果手机语音备忘录功能还有人用吗?
- 记录-MySQL中的事件调度Event Scheduler
- Python简介及安装
- Cacti Nagios Squid三个工具的一些区别
- 建一所希望小学需要600万!
- 区块链BaaS云服务(21)腾讯CCGP跨链平台“系统架构”
- 04-JDBC连接MySQL数据库【修改数据】
- codewars??? Is my friend cheating?
- C语言makefile文件详解,makefile讲解
- 5003.c++定义hpp文件
- JSP教程第3讲笔记
- 基于HAL库使用cubemx配置,驱动MAX30102血氧传感器基础历程
- FFmpeg基础:视频流转图片
- 系统架构设计笔记(80)—— .NET
- python的神经网络模块接法图解_关于pytorch中全连接神经网络搭建两种模式详解...
- this的理解 转https://www.cnblogs.com/pssp/p/5216085.html#!comments
- 微软MSDN Webcast系列视频教程集锦整理
- 小游戏之斗兽棋(uniapp)
- ora-12514TNS 监听程序当前无法识别连接描述符中请求服务的解决