Nuxt-svg-sprite-loader NPM

nuxt-svg-sprite-loader

Nuxt.js module for svg-sprite-loader.

Install

# npm
$ npm install nuxt-svg-sprite-loader

# Yarn
$ yarn add nuxt-svg-sprite-loader

Usage

Add the module to your Nuxt.js modules list in nuxt.config.js:

export default {
  ...
  modules: [
    'nuxt-svg-sprite-loader'
  ]
}

Use an SVG in your page:

<template>
  <svg><use :xlink:href="'#' + Logo.id"></use></svg>
</template>

<script>
import Logo from '@/assets/logo.svg'

export default {
  computed: {
    Logo: () => Logo,
  },
}
</script>

Or use it with JSX:

<script>
import Logo from '@/assets/logo.svg'

export default {
  render() {
    return <svg><use xlinkHref={`#\${Logo.id}`}></use></svg>
  }
}
</script>

Options

You can pass options to the module, which are passed down to the svg-sprite-loader NPM package. Please refer to this for the available options.

Directly:

export default {
  ...
  modules: [
    ['nuxt-svg-sprite-loader', {
      symbolId: 'foo-[name]'
    }]
  ]
}

Top-level:

export default {
  ...
  modules: [
    'nuxt-svg-sprite-loader'
  ],
  spriteSvgLoader: {
    symbolId: 'foo-[name]'
  }
}

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

Thanks a lot for your support! ❤️