title: Raw SVG using raw-loader, keep getting inline SVG
body: <p>I'm trying to display raw svg in the Vue component using raw-loader. 
  However, the svg is always inlined no matter what I do. Here's my code:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div v-html="svg"&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import svg from 'raw-loader!@/assets/images/image.svg';
  export default {
      data () {
          return {
                svg
          }
      }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I understand this is due to <code>vue-cli</code> webpack's config <code>webpack.base.conf.js</code>:</p>
  
  <pre><code>  {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
  </code></pre>
  
  <p>I've tried to add a new loader rule to load raw files if I append <code>?raw</code> to them but that does not work either:</p>
  
  <pre><code>  {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?raw)$/,
      loader: 'raw-loader',
    },
  </code></pre>
  
  <p>I'm using:</p>
  
  <ul>
  <li>vue-cli@2.9.2</li>
  <li>vue@2.5.2</li>
  </ul>