Nuxt.js: svg inline loader

Created on 1 Dec 2017 · 3Comments · Source: nuxt/nuxt.js

Hello!

Have anyone implemented svg loader? I am looking for a solution to use .svg images as components.
If I import .svg as a normal vue component, an error occurs:

[Vue warn]: Invalid Component definition: data:image/svg+xml;base64

Any suggestions?

Thank you very much!

_{This question is available on Nuxt.js community (#c2012)}

help-wanted

Source

davision

Most helpful comment

Nuxt.js doesn't svg loader yet, you can try to import svg in data

<template>
  <div>
    <img :src="demo"></img>
  </div>
</template>

<script>
import demo from '~/assets/demo.svg'
export default {
  data: () => ({
    demo
  })
}
</script>

If you want to use svg as component, you may use loaders like https://github.com/visualfanatic/vue-svg-loader, and use build.extend of nuxt.config.js to config webpack loader, maybe like this:

module.exports = {
  build: {
    extend(config, { dev, isClient }) {
      // config is webpack configuration, such as:
      config.module.rules.push({
        test: /\.svg$/,
        loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
        options: {
          // optional [svgo](https://github.com/svg/svgo) options
          svgo: {
            plugins: [{ removeDoctype: true }, { removeComments: true }]
          }
        }
      })
    }
  }
}

clarkdo on 2 Dec 2017

❤6

All 3 comments

Nuxt.js doesn't svg loader yet, you can try to import svg in data

<template>
  <div>
    <img :src="demo"></img>
  </div>
</template>

<script>
import demo from '~/assets/demo.svg'
export default {
  data: () => ({
    demo
  })
}
</script>

If you want to use svg as component, you may use loaders like https://github.com/visualfanatic/vue-svg-loader, and use build.extend of nuxt.config.js to config webpack loader, maybe like this:

module.exports = {
  build: {
    extend(config, { dev, isClient }) {
      // config is webpack configuration, such as:
      config.module.rules.push({
        test: /\.svg$/,
        loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
        options: {
          // optional [svgo](https://github.com/svg/svgo) options
          svgo: {
            plugins: [{ removeDoctype: true }, { removeComments: true }]
          }
        }
      })
    }
  }
}

clarkdo on 2 Dec 2017

❤6

Many Thanks for this! Will try right away.

davision on 4 Dec 2017

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.