Nuxt SVG Loader - SVGs as components, also on the server side!

Features

Full support of SVGs as components. Import them like your Vue SFCs
Use Vue bindings as you'd do it with normal components
Built on top of svg-to-vue-component
Nuxt 2 (and only Nuxt 2) support
Fully tested!

Demo

A live demo is available through the CodeSandBox of the repo.

Setup

Add nuxt-svg-loader as a dependency using yarn or npm to your project
Add nuxt-svg-loader to modules section of nuxt.config.js

{
  modules: [
    'nuxt-svg-loader',
  ]
}

Now you can use your svg files like regular Vue components
You can use inline svg as well by adding ?inline at the end of the file path

<template>
  <nav>
    <a href="https://github.com/vuejs/vue">
      <VueLogo />
      Vue
    </a>
    <a href="https://github.com/svg/svgo">
      <SVGOLogo />
      SVGO
    </a>
    <a href="https://github.com/webpack/webpack">
      <WebpackLogo />
      webpack
    </a>
    <!-- Inline svg -->
    <a class="with-background-svg" href="https://github.com/webpack/webpack">
      webpack
    </a>
    <a href="https://github.com/webpack/webpack">
      <img src="../components/NuxtTwo.svg?inline">
      webpack>
    </a>
  </nav>
</template>
<script>
import VueLogo from '@/assets/svg/vue.svg';
import SVGOLogo from '@/assets/svg/svgo.svg';
import WebpackLogo from '@/assets/svg/webpack.svg';

export default {
  name: 'Example',
  components: {
    VueLogo,
    SVGOLogo,
    WebpackLogo,
  }
};
</script>
<style>
.with-background-svg {
  background: url('@/assets/svg/vue.svg?inline')
}
</style>

No more options are needed. It'll simply work

Configuration

The plugin will work seamlessly out of the box. It will also include SVGO defaults to avoid collisions between your optimized SVG files!

If you want to configure the underlying loader (or SVGO), you can do that easily as well. (All options available here)

// file: nuxt.config.js

export default {
  // ...
  // Your loader options as svgLoader object
  svgLoader: {
    svgoConfig: {
      plugins: [
        { prefixIds: false } // Disables prefixing for SVG IDs
      ]
    }
  }
}

Migrating from 0.x

Update the deps (of course!)
Rename svgo to svgoConfig
If you used id prefixing manually before, you can delete the config:

export default {
  svgLoader: {
    svgo: { //Rename to svgoConfig  
      plugins: [
        { prefixIds: true } // Delete that line (or the whole svgLoader object if you don't have any other configurations)
      ]
    }
  }
}

How to fix Eslint auto lint error

If you turn on Eslint on save by server, you should exclude .svg files of eslint-loader.

Example:

// nuxt.config.js
build: {
    extend(config, ctx) {
    // Run ESLint on save
    if (ctx.isDev && ctx.isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)|(\.svg$)/ /* <--- here */
      })
    }
  }
}

Development

Clone this repository
Install dependencies using yarn install or npm install
Start development server using npm run dev

License

MIT License

Developmint/nuxt-svg-loader