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

📖 Release Notes

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

1. Update the deps (of course!)
2. Rename svgo to svgoConfig
3. 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

Copyright (c) Alexander Lichter