Community Plugin

gatsby-transformer-svg-sprites

Gatsby plugin to generate SVG sprites from GraphQL sources.

Installation

npm install gatsby-transformer-svg-sprites

Usage

/* gatsby-config.js */

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-svg-sprites',
      options: {
        /* gatsby-transformer-svg-sprites options here */
      }
    }
  ]
}

GraphQL / JavaScript example

import { graphql } from 'gatsby'
import React from 'react'

const Page = ({ data }) => (
  <>
    {data.allFile.nodes.map(node => {
      const svg = node.childSvgSprites

      return svg && (
        <svg key={svg.url} viewBox={svg.viewBox}>
          <use xlinkHref={svg.url}/>
        </svg>
      )
    })}
  </>
)

export default Page

export const query = graphql`
  query {
    allFile {
      nodes {
        childSvgSprites {
          url
          viewBox
        }
      }
    }
  }
`

Options

optimize

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

Defines if the sprites file should be minified. By default, it is enabled on production environments.

skip

Type: string or Array. Default: ''.

A path or an array of paths that shouldn’t be included in the sprites file. It supports glob patterns.

SVG Mixer options

Any other option passed to gatsby-transformer-svg-sprites will be passed to svg-mixer — more info about its options can be found here.

License

The MIT License