vue项目中使用svg图标

1.打开阿里巴巴字符图标库网站选择自己需要的图标

https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

2.下载选择好的图标并解压该文件夹保留以下文件

 iconfont.css'
 iconfont.svg'
 iconfont.ttf'
 iconfont.eot'

3、 把包含这4个文件的文件夹放到项目目录下和src平级

4、在项目的main.js文件中引入

import 'babel-polyfill'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import axios from 'axios'
import $ from 'jquery'
import 'element-ui/lib/theme-chalk/index.css'
import '../icfont/iconfont.css'
import '../icfont/iconfont.svg'
import '../icfont/iconfont.ttf'
import '../icfont/iconfont.eot'

5、查看项目的package.json文件中是否有css-loader处理器，如果有，忽略这一步，如果没有，使用npm install css-loader --save-dev安装

6、在项目中通过使用图标的class将图标引入到页面中

<span class="iconfont icon-huangguan"></span>