A quick and dirty way to inline svg sprites in your Nuxt app.
$ yarn add nuxt-svg-sprite-module
$ npm install nuxt-svg-sprite-module --saveIn nuxt.config.js
modules: [
[
"nuxt-svg-sprite-module",
{
directory: "~/assets/icons",
// Optional template location: defaults to __dirname + /app.html
templateLocation: "src/app.html",
options: {
// Configuration options:
// https://github.com/jkphl/svg-sprite#configuration-basics
},
},
],
];This module finds svgs in your specified directory and inlines them in Nuxt's app template. You can pass svg-sprite options to be merged with the the default configuration options.
By default, icons are prefixed with the word icon.
<svg>
<use xlink:href="#icon-foo"></use>
</svg>In order to tell this module where to inline your sprite you need to include a comment within your app.html file. Idealy this comment would proceed the opening <body> tag. If an app.html file does not exist, one will be generated in its absence.
<!-- svg-sprite -->Pull requests and stars are always welcome. For bugs and feature requests, please create an issue