nuxt-sprite-svg-inline

Nuxt.js plugin

If you have oneSprite.svg like this:

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="custom-id-1">
        ...
    </symbol>
    <symbol id="custom-id-2">
        ...
    </symbol>
</svg>

Then, you can display it like this:

<svg>
    <use xlink:href="#custom-id-1"></use>
</svg>

<svg>
    <use xlink:href="#custom-id-2"></use>
</svg>

Quick start

Install:

# with npm
npm install -D nuxt-sprite-svg-inline

# with yarn
yarn add nuxt-sprite-svg-inline 

Register it on your nuxt.config.js:

const path = require('path')
const spriteSvg = require('nuxt-sprite-svg-inline')

module.exports = {
    /* ... */
    build: {
        extend (config, ctx) {
            if(ctx.isServer) {
                spriteSvg.run(path.join(__dirname,  'path/to/sprite.svg'),
                    path.join(__dirname,  '.nuxt/views/app.template.html'))
            }
        }
    }
}

It will inject your oneSprite.svg at the top of body into the app.template.html after every new build.

Example

# dev test
npm run dev

# production test
npm run build

License

MIT