Inline SVG in vuejs component
You can add a leading ! in the require expression to "override" existing loaders set up by the webpack config.
<div v-html="require('!html-loader!./../assets/inline.svg')"></div>This will work without changes to the vue.config.js (as long as html-loader is installed)
Also, instead of using html-loader look into svg-inline-loader in can add hashes to classes and ids, so you don't need to worry about name collisions if you have multiple inline svgs on your page.
If you don't have html-loader installed simply execute
yarn add -D html-loaderThen add the following object to the rules array in your webpack config file:
{ test: /\.svg$/, use: [{ loader: 'html-loader' }]}And finally, you will be able to import svg files to your scripts with the inline loader.
require('!html-loader!./../assets/inline.svg')// or directly in your v-html directive<div v-html="require('!html-loader!./../assets/inline.svg')"></div>
You're almost there, just tell Webpack which loader to use:
<div v-html="require('html-loader!./../assets/inline.svg')"/>