Skip to content
A quick and dirty way to inline svg sprites in your Nuxt app.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Dec 4, 2018
README.md
index.js Adds the ability to use Nuxt’s default resolver Apr 14, 2019
package.json Adds the ability to use Nuxt’s default resolver Apr 14, 2019
yarn.lock Initial commit Dec 4, 2018

README.md

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

Author

Gaven Heim

You can’t perform that action at this time.