VUE在线调用阿里云图标库前言随着行业内卷,现在硬生生熬成了前端小白，以前在各UI平台开会员下载图标，东拼西凑下载一些

前言

随着行业内卷,现在硬生生熬成了前端小白，以前在各UI平台开会员下载图标，东拼西凑下载一些icon图片放到assets或放到静态文件里public直接引用，随着技术的发展,各大平台技术不断更新迭代为我们开发项目节约了很多宝贵时间, 最开始接触的是fontawesome.js如下

官网 Font Awesome

引入方式比较简单

cdnhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

npmnpm install font-awesome --save

使用方式也比较简单直接标签<i class="fa fa-camera-retro"></i>

后面随着项目开发接触到了阿里云图标库

官网 Iconfont

个人觉得如果只是单纯的只用ioc上面的就够了,阿里云图标库相对来说就比较丰富了,icon图标、illus矢量图、3d插图、lottle动图、字体库今天主要记录下icon图标库

选择icon图标库选择合适的图标

添加至项目

进入项目生成连接

接下来可以直接index.html引入连接

跟fontawesome一样直接标签使用

<i class="iconfont icon-DOC"></i>

编写添加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);
};

配置文件env.js

// 图表库为avue和pig2套地址
const iconfontVersion = ['t/font_667895_v7uduh4zui', 't/font_1638883_8z8m10c3ehb','t/c/font_4011527_45o5k91po8s'
const iconfontUrl = '//at.alicdn.com/$key.css'

main配置入加载link工具,根据配置文件替换link地址

import {iconfontUrl, iconfontVersion} from '@/config/env'

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

配置list文件

export default [
    {
        label: '阿里云图标',
        list: [
             ...
            'icon-DOC',
            'icon-BMP',
            'icon-GIF',
            'icon-JPG',
            'icon-PNG',
            'icon-qiche',
            'icon-tuoguan',
            'icon-icon_baoxian',
            'icon-icon_daijia',
            'icon-icon_jingwaijiuyuan',
            'icon-icon_tijian',
        ]
    }
]

引入使用

import iconList from '@/const/iconList'

<avue-input-icon v-model="form.icon" :icon-list="iconList"></avue-input-icon>

VUE在线调用阿里云图标库

前言