在vue项目中使用阿里svg矢量图

在vue项目中使用阿里svg矢量图

1、进入阿里svg矢量图官网：官网地址

2、进入图标库 => 所有图标库

3、搜索图标

支持拼音、汉字、英语

4、将选中图标加入购物车

5、进入购物车，选择【添加至购物车】

• 如若没有创建的项目，请先点击【加入项目】后的【添加】按钮创建新项目
  

6、点击确定进入【我的项目】界面

7、选中symbol，并下载到本地

8、引用

将iconfont.js文件解压到项目src目录下的assets文件夹下的js文件夹下(如若没有该文件目录请自行创建)
文件目录表：

9、在main.js文件中引入iconfont

import './assets/js/font_1987881_z2auf9al3jo/iconfont'

font_1987881_z2auf9al3jo是自行随机生成的文件夹

10、应用于页面

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

// xlink:href="#图标名称"

11、获取图标名称

• 打开demo_index.html文件
  
• 选中symbol项
  
• 井号后的就是图标名称

12、在全局样式中加入通用 CSS 代码（引入一次就行）

 .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

如每个图标的样式都不相同，可在使用图标的组件中单独加上样式

 .icon {
 	color: #05d1ca;     // 颜色
    font-size:14px;     // 大小
}

13、添加新图标

在当前的图标项目中添加了新的图标后只需将新的文件重新下载到本地，然后更换js下的iconfont.js文件即可