[1315] Can't make svg-inline-loader work

I know this has been asked before but no matter what I try I can't seem to make it work. I want to use a component that will render my svg icons inline.

This is my nuxt.config.js

build: {
    /*
    ** Run ESLINT on save
    */
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
            enforce: 'pre',
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            exclude: /(node_modules)/
          },
          {
            test: /\.svg$/,
            include: /assets\/svg/,
            use: [
              {
                loader: 'svg-inline-loader'
              }
            ]
          },
          {
            test: /\.(png|jpe?g|gif)$/,
            loader: 'url-loader',
            exclude: /assets\/svg/,
            query: {
              limit: 1000, // 1KO
              name: 'img/[name].[hash:7].[ext]'
            }
          })
      }
    },
  }

and this is my component:

<template>
  <div>
  <span :class="'icon-' + name" class="icon" v-html="url"></span>
  </div>
</template>

<script>
  export default {
    props: ['name'],
    computed: {
      url () {
        return require(`~/assets/svg/${this.name}.svg`)
      }
    }
  }
</script>

And this is what gets rendered: <img width="452" alt="screenshot 2017-08-07 21 15 42" src="https://user-images.githubusercontent.com/5978397/29042046-a2b7b058-7bb5-11e7-9ba9-e0d33b5e7016.png">