在vue项目中使用阿里矢量库

阿里矢量库使用方法简易教程

写在前面:之前项目是自己写的项目来练手,所以用的矢量库。工作里面如果UI不用的话也只能用其他方法了。我们目前用的SVG,大家的项目里面都用的是那种形式呢?

一: 在阿里矢量库中注册账号


这个首页的登录页面,一般用github登录就好啦!

二:登录后如何添加自己的项目


登录以后就可以看到这个页面啦!点击下图的图标管理

01 可以申请一个自己的项目 点击紫色的按钮即可看到下面的页面

02 完善相应的信息就可以有自己的项目了。在首页搜索你需要的图标,例如:收藏

03 点击相应的图标,加入到库中,点击购物车的图标可以下载或者添加到自己项目中。如果想加载的快点,就可以直接下载到本地。

04 到购物车里面就可以选择相应的图标到自己的项目中,点击确认就会跳转页面到你的项目。新增的图标就出现了。

05 点击生成最新的icon

三:如果在项目中引入和使用icon

在点击生成font class 生成一段地址 。在index.html中加入

在项目中,你就可以使用i标签来用了。这是我项目中是使用icon的方法啦。在class里要加入你在建项目时候自定义的前缀,eg:iconfont
在class中增加在font class下面图标的名字:

你可能感兴趣的:(vue.js,chrome,javascript)