Vue引入阿里图标

一、下载

1、到阿里图标矢量库下载所需的图标

二、使用

1、在Vue项目中新建一个文件夹（如在static下建一个iconfont文件夹）。</br>
2、将下载的文件解压后把iconfont.xxx的文件全拷贝到iconfont文件下。</br>
3、然后在main.js全局引用

import 'static/iconfont/iconfont.css' 

4、使用方法

<i class="iconfont iconfont-name"></i>

5、有时候动态引用时不方便写class可以用下面的方法

<template>
<div v-for="item in list">
<i class="iconfont" v-html="item.icon"></i>
</div>
</template>
<script>
export default{
data:{
list=[
{icon:'&#xe613;'},
{icon:'&#xe613;'},
{icon:'&#xe613;'},
]
}
}
</script>

list中icon的值可以在iconfont.css中看到

iconfont.css

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-yulan:before { content: "\e613"; }

.icon-tuichuquanping:before { content: "\e79d"; }

注意：

使用时可能或报错提示缺少css-loader依赖，执行下面语句即可

npm install css-loader --save