vue中动态引入Iconfont(阿里巴巴矢量图)

前言

这篇文章主要为大家呈现的是动态改变Iconfont，这个icon一般用于导航菜单的标题前面，当我们有要可以动态修改更换标题图标时，不用再手动去修改代码了，是可以直接放在数据中修改的，非常的方便，而且很容易操作，尽管不是自己团队中的人，替换的话也很简单，下面我来为大家展示

一、先登录Iconfont-阿里巴巴

登录的时候有几个选项，咱要不是阿里员工的话就直接微博扫码登录就可以了

二、创建项目

1、用鼠标触摸到导航菜单的图标管理，会展开一个二级菜单，其中有一个菜单叫我的项目

2、点击进去，有一个新建项目

3、点击，里面的内容看着填就行

4、点击新建，就可以了

三、在项目里添加自己的图标

点击上传图标至项目

SVG的图片不用咱们操心的，让你的UI兄弟或UI姐妹搞定就可以了

然后点击下载到本地

四、在Vue项目中进行操作

1、把下载的文件解压，然后复制这五个文件

2、在Vue项目中的src文件中的assets文件中创建一个iconfont文件，并把复制的5个文件放在里面

3、在main.js中引入iconfont的css文件

4,、用的时候

<i class="iconfont iconshuxue"></i>
//        必填项    icon在图标库里的名字

五、备注

在替换的时候，你要从新下载一下字体图标，然后在把那5个文件从新替换一下

结语

非常实用的一个东西，希望可以对你有所帮助