title: Inline SVG in vuejs component
body: <p>I have created a Vuejs project using @vue/cli version 3.0.0-beta.16 and in my Home.vue single file component I want to import and add inline SVG in the template but I am having trouble doing so.</p>
  
  <p>The problem is vue cli is already using .svg file extension for file-loader like so:</p>
  
  <pre><code>webpackConfig.module
    .rule('svg')
      .test(/\.(svg)(\?.*)?$/)
      .use('file-loader')
        .loader('file-loader')
        .options({
          name: getAssetPath(options, `img/[name].[hash:8].[ext]`)
        })
  </code></pre>
  
  <p>I have already tried using the html-loader plugin for including svg in the template and it works fine if I clear the svg default use in my vue.config.js and add my own loader like this:</p>
  
  <pre><code>// vue.config.js
  
  chainWebpack: config =&gt; {
      const svgRule = config.module.rule('svg')
  
      // clear all existing loaders.
      // if you don't do this, the loader below will be appended to
      // existing loaders of the rule.
      svgRule.uses.clear()
  
      // add replacement loader(s)
      svgRule
      .test(/\.(svg)$/)
      .use('html-loader')
      .loader('html-loader')
      .options({
      })
  }
  </code></pre>
  
  <p>and in my template:</p>
  
  <pre><code>// Home.vue
  
  &lt;div v-html="require('./../assets/inline.svg')"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But the problem is it also replaces svg src in the <code>&lt;img /&gt;</code> tags with inline svg code. What I want is use file-loader for <code>&lt;img src="something.svg" /&gt;</code> and use html-loader for <code>require('./inline.svg')</code>. How do I use multiple loaders for same rule in webpack? Or is it the right approach? Any help would be appreciated.</p>
  
  <p><strong>Edit</strong>
  I think the problem is I'm adding the both loaders the wrong way. This is how I add them in my file:</p>
  
  <pre><code>// 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']
  })
  </code></pre>