title: Relative modules were not found with svg sprite loader, Vue.js & webpack2
body: <p>I’m trying to add svg-sprite-loader to my project, but i keep getting this error, where it can’t find the modules. Can anyone help me clarify why this is happening?</p>
  
  <p><strong>Error</strong></p>
  
  <blockquote>
    <p>These relative modules were not found:</p>
    
    <p>./wrench.svg in ./src/assets/svg ^./.*.svg$ 
    …</p>
  </blockquote>
  
  <p><strong>build/webpack.base.conf.js</strong></p>
  
  <pre><code>{
       test: /\.(png|jpe?g|gif)(\?.*)?$/, // removed svg from the list
       loader: 'url-loader',
       options: {
           limit: 10000,
           name: utils.assetsPath('img/[name].[hash:7].[ext]')
       }
  },
  {
       test: /\.svg(\?.*)?$/,
           loader: 'svg-sprite?' + JSON.stringify({
               name: '[name]_[hash]',
               spriteModule: 'utils/sprite',
               prefixize: true
           })
  }
  </code></pre>
  
  <p><strong>build/utils/sprite.js</strong></p>
  
  <pre><code>var Sprite = require('svg-sprite-loader/lib/web/sprite')
  
  // Remove visibility:hidden
  Sprite.styles.pop()
  Sprite.styles.push('display:none')
  
  var globalSprite = new Sprite()
  
  if (document.body) {
    globalSprite.elem = globalSprite.render(document.body)
  } else {
    document.addEventListener('DOMContentLoaded', function () {
      globalSprite.elem = globalSprite.render(document.body)
    }, false)
  }
  
  module.exports = globalSprite
  </code></pre>
  
  <p><strong>src/main.js</strong></p>
  
  <pre><code>import Icon from './icon.vue'
  Vue.component('icon', Icon)
  </code></pre>
  
  <p><strong>src/icon.vue</strong></p>
  
  <p></p>
  
  <pre><code>  &lt;svg class="icon" :class="'icon-' + name"&gt;
      &lt;use :xlink:href="xlink"/&gt;
    &lt;/svg&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: ['name'],
      computed: {
          xlink () {
              return require(`./assets/svg/` + `${this.name}.svg`)
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>If i try to import an icon from a relative path, i get the following error:</p>
  
  <pre><code>import share from './assets/svg/share.svg'
  </code></pre>
  
  <blockquote>
    <p>This relative module was not found: 
    *./src/assets/svg/share.svg in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&amp;index?0&amp;bustCache!./src/icon.vue</p>
  </blockquote>