nuxt-svg-loader

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
• Built on top of vue-svg-loader
• 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

<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>
  </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>

• No more options are needed. It'll simply work

Configuration

The plugin will work seamlessly out of the box. If you are in need of configuring the loader options (eg for id prefixing), you can do that:

// file: nuxt.config.js

export default {
  // ...
  // Your loader options as svgLoader object
  svgLoader: {
    svgo: {
      plugins: [
        { prefixIds: true },
      ]
    }
  }
}

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

Changelog

0.1.0 (2018-11-05)

Features

• pass custom loader options if needed (071edce)

<a name="0.0.1"></a>