1、安装依赖
npm install --save-dev svg-sprite-loader
2、 新建svg资源文件夹 src/assets/svg
将svg资源放入此目录，接下来会在配置文件中该路径
3、vue-cli 脚手架项目3.x 以上配置 vue.config.js
1 const path = require('path')
2 module.exports = {
3 chainWebpack: config => {
4 // svg rule loader
5 const svgRule = config.module.rule('svg') // 找到svg-loader
6 svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
7 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
8 svgRule // 添加svg新的loader处理
9 .test(/\.svg$/)
10 .use('svg-sprite-loader')
11 .loader('svg-sprite-loader')
12 .options({
13 symbolId: 'icon-[name]',
14 })
15 // 修改images loader 添加svg处理
16 const imagesRule = config.module.rule('images')
17 imagesRule.exclude.add(path.resolve(__dirname, 'src/assets/svg')) //注意这个路径，为svg资源文件的路径
18 config.module
19 .rule('images')
20 .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
21 }
22 }
4、创建组件 SvgIcon.vue （ src/compoments/SvgIcon.vue ）
1 <template>
2 <svg :class="svgClass" aria-hidden="true">
3 <use :xlink:href="iconName"></use>
4 </svg>
5 </template>
6
7 <script>
8 export default {
9 name: 'svg-icon',
10 props: {
11 iconClass: {
12 type: String,
13 required: true
14 },
15 className: {
16 type: String
17 }
18 },
19 computed: {
20 iconName () {
21 return `#icon-${this.iconClass}`
22 },
23 svgClass () {
24 if (this.className) {
25 return 'svg-icon ' + this.className
26 } else {
27 return 'svg-icon'
28 }
29 }
30 }
31 }
32 </script>
33
34 <style scoped>
39 </style>
5、组件注册（全局） （src/utils/iconsSvg.js）
1 import Vue from 'vue'
2 import SvgIcon from '@/components/SvgIcon' //引入第四步的组件
3
4 // 全局注册组件
5 Vue.component('svg-icon', SvgIcon)
6 // 定义一个加载目录的函数
7 const requireAll = requireContext => requireContext.keys().map(requireContext)
8 const req = require.context('@/assets/svg', false, /\.svg$/) //为svg资源文件的路径
9 // 加载目录下的所有 svg 文件 10 requireAll(req)
6、引入组件 main.js
import './utils/iconsSvg'
7、使用svg组件
iconClass: svg文件的文件名
className: svg图标的样式类名
1 <template>
2 <div>
3 <p>小明同学的大头贴</p>
4 <svg-icon iconClass="boy" className="boy"></svg-icon>
5 </div>
6 </template>
7
8 <style scoped>
9 .boy {
10 width: 200px;
11 height: 200px;
12 }
13 </style>
