在上一章完成登录页面基本结构之后，svg虽然也写进去了，可怎么都不显示，这章就是解决这个问题。
在vue项目中使用svg，按照EL-ADMIN 后台管理系统模仿写，可是到了页面怎么都不显示图标，网上查了很多资料，最终搞定了，唉！
1.vue项目中src目录下创建icons文件夹，再创建子文件夹svg，将svg图标资源都放到这里
svg1.png
2.再创建入口文件index.js,代码如下：
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // SvgIcon组件
// register globally
Vue.component('svg-icon', SvgIcon)
// require.context,通过正则匹配到文件，全部引入
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
3.SvgIcon组件
在components文件夹下添加SvgIcon文件夹，文件夹中添加入口index.vue来定义组件，代码如下：
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
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>
xlink:href 中传入 svg ID 就好了，由于在上面的配置文件中我们直接使用文件名作为 symbol 的 ID，所以这里传入的 ID 即为你想显示的图标的 svg 文件名(没懂，呵呵)
4.vue项目入口main.js文件中引入icons
import './icons' // icon 引入icons文件夹下所有的svg
5.修改webpack配置
修改webpack.base.conf.js配置文件(之前一直调不通，就去看手摸手，带你优雅的使用 icon,一直没注意到这里，我就一直查呀查。。。)
svg2.png
下面就需要导入svg-sprite-loader在package.json配置添加
"devDependencies": {
"svg-sprite-loader": "3.8.0",
}
在手动 npm i重新导入
6.项目中使用方式如下，icon-class后面跟svg的名称
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
</el-input>
</el-form-item>
7.预览效果图
svg3.png
