Vue3项目动态引入iconfont（阿里巴巴矢量图标库）

最新推荐文章于 2024-10-07 14:45:56 发布

NMGWAP

最新推荐文章于 2024-10-07 14:45:56 发布

阅读量1.7k

点赞数

文章标签： java css less javascript vue

本文链接：https://blog.csdn.net/NMGWAP/article/details/125066745

版权

本文介绍了在Vue3项目中如何动态引用阿里巴巴的Iconfont矢量图标库。首先在utils文件夹下创建iconfont.js，定义方法动态加载iconfont文件，然后在public/index.html配置选择器，main.js中导入，最后在组件中按需使用，实现动态加载效果。

摘要由CSDN通过智能技术生成

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具

这篇文章主要讲的是在Vue3项目上，动态引用iconfont库。iconfont怎么新建项目，这里就不多说了，我们要用到的就是下方圈出来的。

1.定义方法

我们定义一个方法，动态通过link引入我们的iconfont文件，在项目中新建文件夹utils，这个文件夹存放我们自定义的方法，文件夹下新建iconfont.js，内容如下：

/**
 * 阿里iconfont配置 
 **/

// 定义iconfont库
let iconfontVersion = ['1135504_hneleglv0jv']
let iconfontUrlCss = `//at.alicdn.com/t/font_$key.css`

// 定义动态插入方法
const loadStyle = url => {
    const link = document.createElement('link')
    link.type = 'text/css'
    link.rel = 'stylesheet'
    link