使用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$/));