如何在Vue/Cli 4 中引入 svg图片

使用SVG sprite loader 可以帮助我们在网页中引入svg图片

我们可以参照SVG sprite loader官方文档中对于引入loder和plugins的描述

以下在webpack.config的文件中配置

// webpack 1 multiple loaders
{
  test: /\.svg$/,
  loaders: [
    `svg-sprite-loader?${JSON.stringify({ ... })}`,
    'svg-transform-loader',
    'svgo-loader'
  ]
}
 
// webpack >= 2
{
  test: /\.svg$/,
  loader: 'svg-sprite-loader',
  options: { ... }
}

但是在Vue中,一般使用Vue.config.js配置

因此需要转换下写法

const path = require("path")

module.exports = {
  lintOnSave: false,
  chainWebpack: config =>{
    const dir = path.resolve(__dirname,'src/assets/icons')
    config.module
      .rule('svg-spirit')
      .test(/\.svg$/)
      .include.add(dir).end() //只包含icons目录
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir)

  }
}

最后,在组件的js中使用import引入图片后,在html标签中使用

小技巧,直接一次性引入整个文件夹,即可引入多个svg图标

const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
  importAll(require.context('../assets/icons', true, /\.svg$/));