nuxt-svg-sprite-loader

Nuxt.js module for svg-sprite-loader.

Install

1# npm
2$ npm install nuxt-svg-sprite-loader
3
4# Yarn
5$ yarn add nuxt-svg-sprite-loader

Usage

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

1export default {
2  ...
3  modules: [
4    'nuxt-svg-sprite-loader'
5  ]
6}

Use an SVG in your page:

1<template>
2  <svg><use :xlink:href="'#' + Logo.id"></use></svg>
3</template>
4
5<script>
6import Logo from '@/assets/logo.svg'
7
8export default {
9  computed: {
10    Logo: () => Logo,
11  },
12}
13</script>

Or use it with JSX:

1<script>
2import Logo from '@/assets/logo.svg'
3
4export default {
5  render() {
6    return <svg><use xlinkHref={`#\${Logo.id}`}></use></svg>
7  }
8}
9</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:

1export default {
2  ...
3  modules: [
4    ['nuxt-svg-sprite-loader', {
5      symbolId: 'foo-[name]'
6    }]
7  ]
8}

Top-level:

1export default {
2  ...
3  modules: [
4    'nuxt-svg-sprite-loader'
5  ],
6  spriteSvgLoader: {
7    symbolId: 'foo-[name]'
8  }
9}

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:

 If you want to send me a one time donation. The coffee is pretty good 😊.
 Also for one time donations if you like PayPal.
 Here you can support me regularly, which is great so I can steadily work on projects.

Thanks a lot for your support! ❤️

License

MIT License © Sebastian Landwehr