first10 / gatsby-plugin-svg-sprite-loader

Gatsby plugin for creating SVG sprites using SVG sprite loader

gatsby-plugin-svg-sprite-loader

Gatsby plugin for creating SVG sprites using SVG sprite loader.

Install

$ npm install gatsby-plugin-svg-sprite-loader

Configure

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-svg-sprite-loader`,
      options: {
        /* SVG sprite loader options */
        pluginOptions: {
          /* SVG sprite loader plugin options */
        }
      },
    },
  ],
}

options

The options parameter is passed directly to SVG sprite loader, the documentation can be found on SVG sprite loader documentation. By default, this plugin sets extract option to true, spriteFilename to 'sprites.[contenthash].svg' and symbolId to '[name]--[hash:base64:5]' — the naming convention is the same used by Gatsby for CSS files.

pluginOptions

The pluginOptions parameter is passed to svg-sprite-loader/plugin — if extract is set to true in the options parameter. If the images are being defined only inside <use xlinkHref='...'/> — and never inside CSS or <img> elements — set plainSprite option to true, so SVG sprite loader will generate a lighter output file.

Usage

If extract mode is enabled (set to true by default), use sprite.url in xlinkHref prop. Otherwise, use sprite.id.

/* extract === true (default) */
import React from 'react'
import sprite from 'images/sprite.svg'

export default () => (
  <svg viewBox={sprite.viewBox}>
    <use xlinkHref={sprite.url}/>
  </svg>
)

/* extract === false */
import React from 'react'
import sprite from 'images/sprite.svg'

export default () => (
  <svg viewBox={sprite.viewBox}>
    <use xlinkHref={sprite.id}/>
  </svg>
)

License

The MIT License