nuxt-svg-sprite-module
v1.0.7
Published
A quick and dirty way to inline svg sprites in your Nuxt app.
Downloads
383
Maintainers
Readme
nuxt-svg-sprite-module
A quick and dirty way to inline svg sprites in your Nuxt app.
Install
$ yarn add nuxt-svg-sprite-module
$ npm install nuxt-svg-sprite-module --save
Configure
In 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
},
},
],
];
Usage
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 -->
Contributing
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue