gatsby-plugin-svg-sprites

Gatsby plugin for creating SVG sprites using External SVG Sprite.

Install

$ npm install gatsby-plugin-svg-sprites

Configure

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-svg-sprites`,
      options: {
        optimize: process.env.NODE_ENV === 'production',
        pluginOptions: {
          /* ...External SVG Sprite plugin options */
        }
        /* ...External SVG Sprite loader options */
      },
    },
  ],
}

Options

options

Default: { name: 'sprites.[contenthash].svg', iconName: '[name]--[hash:base64:5]' }; Type: Object.

The options object is passed directly to External SVG Sprite loader, more info can be found here. To keep consistency, name and iconName default values use the same formats used by Gatsby.js for CSS files.

optimize

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

With this option, the sprites file ids will be minified. By default, it is enabled on production environments.

pluginOptions

Default: {}; Type: Object.

The pluginOptions parameter is passed to External SVG Sprite plugin.

Usage

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

export default () => (
  <svg viewBox={icon.viewBox}>
    <use xlinkHref={icon.url}/>
  </svg>
)
.icon {
  background-image: url('images/icon.svg') no-repeat 0;
}

License

The MIT License