vue自定义svg图标无法显示


??在vue中,使用svg图标的组件来显示svg图标,发现怎么都显示不出来,

组件代码如下:




??解决方案:

npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D

在vue.config.js 中加入

chainWebpack(config) {
  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()
},