1、将svg转为font
这里要介绍两个网站：
（1）www.iconfont.cn/home/index（获取想要的图标的svg）
（2）icomoon.io/ (将svg转成font)
First，find what svg you want.
这里有很多图标，基本需求都可以满足，你可以在搜索栏搜索关键词来找到你想要的图标，比如搜索refresh
选择你想要的那个，下载svg格式
然后到icomoon网站上转成font和css
选择selection，再选择左上角import icons，把我们刚下载的svg导入
然后选中它，切换到右边菜单generate font
然后就可以下载了，在下载前我们可以设置下下载文件夹名和fontclass的前缀
一般默认就好了
解压下载的文件夹，打开
将fonts文件夹和style.css复制到vue项目的assets目录下，打开style.css我们可以看到
检查style.css对font文件夹内的文件的引用路径是否正确
然后在style.css文件最后就是我们真正要用到的font class了，这里icon-refresh就是我们导入的refresh那个svg转成的
接着在main.js里面引入style.css
再在页面任意地方加
<i class="icon-refresh"></i>启动项目，我们就可以看到页面上多了一个refresh刷新的icon啦
我们还可以改变他的颜色，只要给icon-refresh这个class加上color字体颜色，就可以改变啦，前提是你这个svg是不带颜色的～
上面所说的大家都应该很熟悉了，如果是个人开发还好，iconfont网站上的很多svg都是标准的，接下来我说一下企业开发会遇到的问题吧
如果公司UI是用蓝湖的话，可能会遇到有些svg下载下来后上传到icomoon时报错，特别是比较复杂的圆圈类或者方形类的svg，比如这个 说明提示的icon
下载font class文件到项目中引入，也会发现这个class并不能渲染出所要的icon效果
这时候，在不麻烦UI设计师的情况下，我们可以怎么处理呢
这时候我们需要一个软件，叫sketch
新建一个文档，把刚刚下载的svg拖进去
点击左边svg结构展开
选中相关的图层，分别轮廓化，轮廓化在上方菜单图层选项里
轮廓化完成后，选择最顶级（ 这里是编组5(2) ），选择导出->导出画布->svg格式，点右上角的导出按钮
将导出的svg再次上传到icomoon，你会发现跟一开始不一样了，在generate中可以看到icon的样子
这时再下载font class到项目中使用，大功告成！
2、直接存放svg在项目中，通过组件渲染icon
首先先在src下建个icons文件夹，下面建个svg文件夹专门存放svg文件，与svg文件夹同级建个index.js
然后在components下建个SvgIcon文件夹，在其下面写个组件：
<template>
<svg :class="svgClass" aria-hidden="true">
<use :href="iconName"></use>
</svg>
</template>
<script>
export default {
name: 'icon',
props: {
iconClass: {
type: String,
default: ''
},
className: {
type: String,
default: ''
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>接着icons/index.js的代码（自动引入svg文件夹下所有svg文件）：
import Vue from 'vue'
import SvgIcon from '../components/SvgIcon/index'
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)然后在main.js中引入icons/index.js
还差最后一步，在打包时你需要一个loader来解析你的svg文件，它就是 svg-sprite-loader
npm i svg-sprite-loader --save-dev在vue.config.js的chainWebpack里配置loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()大功告成！你就可以直接在项目里使用svgicon组件来渲染你svg icon了！
<svg-icon icon-class="refresh"></svg-icon>
希望可以帮到大家～
