Vue 中svg的使用

1. 安装 svg-sprite-loader
2. cli3以上的版本 在vue.config.js 配置如下
    

   module.exports = {
     lintOnSave: process.env.RELEASE_ENV !== 'production',
     publicPath: 'tenant',
     assetsDir: 'static',
     devServer: {},
     css: {},
   
   // 以下才是svg的配置 
     chainWebpack: config => {
       config.module
         .rule('svg')
         .exclude.add(resolve('src/assets/image/svg/icon'))
         .end()
   
       config.module
         .rule('icon')
         .test(/\.svg$/)
         .include.add(resolve('src/assets/image/svg/icon'))
         .end()
         .use('svg-sprite-loader')
         .loader('svg-sprite-loader')
         .options({
           symbolId: 'icon-[name]'
         })
     }
   }

3. 封装组件 svg-icon 
    

   // 本文中的文件目录为：src/views/widget/svg-icon/Index.vue
   
   
   <template lang="pug">
     svg