Home

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: