Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具
这篇文章主要讲的是在Vue3项目上，动态引用iconfont库。iconfont怎么新建项目，这里就不多说了，我们要用到的就是下方圈出来的。
1.定义方法
我们定义一个方法，动态通过link引入我们的iconfont文件，在项目中新建文件夹utils，这个文件夹存放我们自定义的方法，文件夹下新建iconfont.js，内容如下：
/***阿里iconfont配置**///定义iconfont库leticonfontVersion=['1135504_hneleglv0jv']leticonfontUrlCss=`///t/font_$key.css`//定义动态插入方法constloadStyle=url=>{constlink=document.createElement('link')link.type='text/css'link.rel='stylesheet'link.href=urlconsthead=document.getElementsByTagName('head')[0]head.appendChild(link)}//动态插入iconfontVersion.forEach(ele=>{loadStyle(iconfontUrlCss.replace('$key',ele))})
iconfontVersion这个数组变量里面的就是上面圈的路径，每个项目路径基本都是这块在变，所以提取出来，这里为什么用数组呢，因为项目可能有多个图标库。这里面基本不需要修改，修改的就是iconfontVersion这里面的。
2.配置选择器
选择器需要配置下，在public/index.html文件中加入以下代码：
[class^="icon"]{font-family:"iconfont"!important;font-size:18px!important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
icon这个是根据你的iconfont项目FontClass/Symbol 前缀来变化的，我上面演示的是以icon开头。
3.main.js导入
在项目main.js中导入
//动态插入iconfontrequire('./utils/iconfont');
4.使用
在需要使用的地方
<iclass="iconfonticonyonghuming"></i>
iconfont 这个一定要有，后面的这个是项目fontclass的名字。
5.效果
右侧输入框的小图标就是iconfont
如果觉得《Vue3项目动态引入iconfont（阿里巴巴矢量图标库）》对你有帮助，请点赞、收藏，并留下你的观点哦！
