VUE在线调用阿里Iconfont图标库

最新推荐文章于 2023-03-31 23:12:32 发布

程序员劝退师-TAO

最新推荐文章于 2023-03-31 23:12:32 发布

阅读量1.2k

点赞数 2

分类专栏： # VUE 文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/CSDN877425287/article/details/120806405

版权

VUE 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

前言

多年前我本是个服务端小白，随着行业内卷，硬是被熬成了前端小白。。。开个玩笑，只是个人比较喜欢学习技术罢了！本章将带领大家以另一个高端的方式打开阿里Iconfont图标库，过去，我们要么是自己在网上费好大劲，东拼西凑的找一些icon的图片，来美化我们的网页，然而随着技术的发展，和一些大平台的技术奉献，这里不得不说阿里还是牛逼，这里不是夸它，给它打广告，确实，人家在一些领域做的比某腾要好，可能也和领域有关吧，受我个人认知水平问题，我也只能这么认为，比如在我门JAVA服务端方向，阿里有Nacos、Canal、RocketMQ、Dubbo、Sentinel等一些开源技术。回归正题。看标题本章内容是围绕VUE前端和阿里Iconfont图标库展开的，经历了从网站上东拼西凑图标的时代，大概是15~16年左右我开始解除阿里Iconfont图标库，刚开始就只会下载图标使用，如下
在这里插入图片描述
这种直接就是下载的图片，还是比较lol，后面随着前端技术的学习，直到写uniapp的时候，开始学会使用图标文件应用

这种如果频繁更改的图标那么也需要频繁从新下载图标文件，从新导入，比较麻烦，那么本章将以在线引入阿里Iconfont图标库的方式动态加载，这种方式可以不用下载icon图标，也不用下载icon图标文件，个人感觉最方便的就是可以动态更新图标库！而且就算我们把阿里Iconfont图标库中的项目组删除，只要生成过连接的，那么项目中还是可以使用的，但是不知道连接回收时间是多久！

开干Iconfont

官网
Iconfont

挑选图标
在这里插入图片描述
添加至项目

获取链接

那么至此Iconfont平台相关操作完毕，接下来是VUE方便的操作

在线调用测试

index.html引入连接
在这里插入图片描述

<link rel="stylesheet" href="//at.alicdn.com/t/font_2872687_x5kgx7w5eth.css">

界面使用

<i class="iconfont icon-3column"></i>

效果查看
在这里插入图片描述
测试完毕！

VUE项目整合

编写添加head工具

/**
 * 动态插入css
 */

export const loadStyle = url => {
    const link = document.createElement('link')
    link.type = 'text/css'
    link.rel = 'stylesheet'
    link.href = url
    const head = document.getElementsByTagName('head')[0]
    head.appendChild(link)
}

这个就是帮我们在head添加link标签的，效果如下
在这里插入图片描述
main配置
导入加载link工具

import { loadStyle } from './utils/util'

初始化iconfont连接

let iconfontVersion = ['2872417_3u9w2bdk2b'];
const iconfontUrl = `//at.alicdn.com/t/font_$key.css`

这里为什么使用$key是因为如果我们有多个icon项目，那么我们可以iconfontVersion数组中多个添加即可

编写替换$key连接方法，并调用添加link工具方法

// 动态加载阿里云字体库
iconfontVersion.forEach(ele => {
  console.log(iconfontUrl.replace('$key', ele))
  loadStyle(iconfontUrl.replace('$key', ele))
})

完整代码
在这里插入图片描述
图标使用

		 <i class="iconfont icon-3column"></i>
        <i class="iconfont icon-column-4"></i>

效果展示
在这里插入图片描述

这里我们i标签中需要固定写iconfont，那么我们可以优化一下

优化iconfont
理论上我们使用iconfont图标那么icon-3column、icon-column-4都是以icon-为前缀的，那么我们可以使用css匹配来做css叠加！
编写common.scss文件，代码如下


// 关于 图标 CSS 的设置
[class^="icon-"] {
  font-family: "iconfont" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 18px !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.avue-input-icon__item i, .avue-crud__icon--small {
  font-family: "iconfont" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 24px !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.el-menu-item [class^=icon-] {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}

.el-submenu [class^=icon-] {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
}

全局引用
main文件中写入

import './styles/common.scss'

效果查看
在这里插入图片描述
搞定

彩蛋

如果我们要做系统图标展示，如下效果！
在这里插入图片描述
那么我们就要将我们选择的图标库的图标代码复制下来，一两个还好，当我们多了是不可能手动复制的，那么我这里提供一个脚本供大家使用！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取阿里iconList</title>
    <script type="text/javascript" src="http://static.runoob.com/assets/jquery/2.0.3/jquery.min.js"></script>
</head>
<body id="body">
<a target="_blank" href="https://blog.csdn.net/CSDN877425287/article/details/120806405">请结合VUE在线调用阿里Iconfont图标库这篇文章使用</a> 
<br>
<textarea cols="100" rows="30" id="biao1"></textarea>
<br>
<input type="button" onClick="copyList()" value="点击复制代码"/>
<p>复制完了粘贴到iconList文件中</p>
<script type="text/javascript">
    let iconfontVersion = ['2872687_x5kgx7w5eth', '667895_v7uduh4zui'];
    let iconfontVersionName = ['我的库', '你的库'];
    let iconfontUrl = `http://at.alicdn.com/t/font_$key.css`;
    let taskList = [];
    let construction = {
        label: "",
        list: []
    }
    const iconReg = /(icon-.+?)(?=:)/ig

    function sendRequest(path) {
        return new Promise(function (resolve) {
            var xmlHttp = new XMLHttpRequest();
            //2.为引擎对象绑定监听事件
            xmlHttp.onreadystatechange = function () {
                //当状态变化时处理的事情
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //5.接收响应信息
                    var datas = xmlHttp.responseText;
                    resolve(datas);
                }
            }
            xmlHttp.open("GET", path, true);
            xmlHttp.send();
        });
    }

    async function start() {
        for (let i = 0; i < iconfontVersion.length; i++) {
            var path = iconfontUrl.replace("$key", iconfontVersion[i])
            var data = await sendRequest(path);
			
			//console.log(data)
            var matchAllData = data.matchAll(iconReg)
            var fromIcon = Array.from(matchAllData, x => x[0])
            var construction = {
                label: iconfontVersionName[i],
                list: fromIcon
            }
            taskList.push(construction)
        }
        
		var taskListStr=JSON.stringify(taskList)
		
		 var replaceLabel = taskListStr.replaceAll('"label"', 'label')
		 var replaceList = replaceLabel.replaceAll('"list"', 'list')
		 
		 console.log(replaceList)
         document.getElementById("biao1").innerHTML = replaceList;
        
    }
    function copyList() {
        var Url2 = document.getElementById("biao1");
        Url2.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        alert("已复制好，粘贴到iconList文件中。");
    }

    start();

</script>


</body>

</html>

代码放到html文件中，然后运行即可

程序员劝退师-TAO

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE在线调用阿里Iconfont图标库

前言多年前我本是个服务端小白，随着行业内卷，硬是被熬成了前端小白。。。开个玩笑，只是个人比较喜欢学习技术罢了！本章将带领大家以另一个高端的方式打开阿里Iconfont图标库，过去，我们要么是自己在网上费好大劲，东拼西凑的找一些icon的图片，来美化我们的网页，然而随着技术的发展，和一些大平台的技术奉献，这里不得不说阿里还是牛逼，这里不是夸它，给它打广告，确实，人家在一些领域做的比某腾要好，可能也和领域有关吧，受我个人认知水平问题，我也只能这么认为，比如在我门JAVA服务端方向，阿里有Nacos、Canal
复制链接

扫一扫