next-svg-sprites

Generate SVG sprites from imported files using SVG sprite loader.

Installation

npm install next-svg-sprites svg-sprite-loader

Usage

With next-with-plugins

/* next.config.js */

const withPlugins = require('next-with-plugins')

module.exports = withPlugins({
  plugins: [
    {
      resolve: 'next-svg-sprites',
      options: {
        /* next-svg-sprites options here */
      }
    }
  ]
})

Standalone

/* next.config.js */

const withSvgSprites = require('next-svg-sprites')

module.exports = withSvgSprites({
  /* Next.js config options here */
}, {
  /* next-svg-sprites options here */
})

JavaScript import

import React from 'react'
import icon from 'images/icon.svg'

export default () => (
  <svg viewBox={icon.viewBox}>
    <use xlinkHref={icon.symbol}/>
  </svg>
)

CSS

.icon {
  background-image: url('images/icon.svg') no-repeat 0;
}

Options

minifyIds

Type: boolean. Default: process.env.NODE_ENV === 'production'.

Minify symbol ids, enabled if process.env.NODE_ENV === 'production' by default.

pluginOptions

Type: Object. Default: { plainSprite: true }.

Options used by svg-sprite-loader/plugin. By default, plainSprite is set to true.

SVG sprite loader options

Any other option passed to next-svg-sprites will be passed to svg-sprite-loader — more info about its options can be found here. By default, this plugin will set the following options:

{
  esModule: false,
  extract: true,
  spriteFilename: 'static/sprites.[contenthash].svg',
  symbolId: '[name]--[hash:base64:5]',
}

Note: if minifyIds is set to true, symbolId will be ignored.

License

The MIT License