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

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

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

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

《在vue项目中使用阿里矢量库》
这个首页的登录页面,一般用github登录就好啦!

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

《在vue项目中使用阿里矢量库》
登录以后就可以看到这个页面啦!点击下图的图标管理
《在vue项目中使用阿里矢量库》

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

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

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

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

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

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

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

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

05 点击生成最新的icon

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

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

在点击生成font class 生成一段地址 。在index.html中加入
<link rel="stylesheet" href="你复制的地址">

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

    原文作者:小羊裤脚
    原文地址: https://segmentfault.com/a/1190000019913862
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞