gatsby-transformer-svg-sprites
v5.0.1
Published
Gatsby plugin to generate SVG sprites from GraphQL sources
Downloads
1
Maintainers
Readme
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.