Recently, I embarked on a Vuejs project using @vue/cli version 3.0.0-beta.16. In my Home.vue single file component, I encountered an issue while trying to import and add inline SVG to the template.
The crux of the problem lies in the fact that vue cli already associates the .svg file extension with the file-loader configuration:
webpackConfig.module
.rule('svg')
.test(/\.(svg)(\?.*)?$/)
.use('file-loader')
.loader('file-loader')
.options({
name: getAssetPath(options, `img/[name].[hash:8].[ext]`)
})
After experimenting with the html-loader plugin to incorporate SVG within the template, I discovered it only worked after removing the default svg configuration in my vue.config.js and implementing my custom loader like such:
// vue.config.js
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.test(/\.(svg)$/)
.use('html-loader')
.loader('html-loader')
.options({
})
}
As for the template implementation:
// Home.vue
<div v-html="require('./../assets/inline.svg')"></div>
However, a new problem emerged where the html-loader also replaced the SVG src within <img /> tags with inline SVG code. My goal is to utilize file-loader for
<img src="something.svg" />require('./inline.svg'). Can multiple loaders be applied to the same rule in webpack? Is my current approach correct? Any insights would be greatly appreciated.
Edit Upon reflection, I suspect I may have incorrectly added both loaders. This is how I inserted them into my file:
// vue.config.js
svgRule
.test(/\.(svg)$/)
.use('file-loader')
.loader('file-loader')
.options({
name: getAssetPath(options, `img/[name].[ext]`)
})
svgRule
.test(/\.(svg)$/)
.use('html-loader')
.loader('html-loader')
.options({
attrs: ['div:v-html']
})