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

<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. 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)
      ]
    }
  }
}

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

1.0.0 (2019-01-09)

Bug Fixes

• check if options is a thing (ec9999f)

Features

• replaced vue-svg-loader with svg-to-vue-component (#19) (6061109)
• use default options from svg-to-vue and add svgo backwards compat (84a84b7)

<a name="0.1.0"></a>