Now 100x Faster

Read the latest from Gatsby CTO Kyle Mathews Re-introducing Gatsby, a Reactive Site Generator

ContactSign Up for Free
Community Plugin
View plugin on GitHub

gatsby-transformer-inline-svg-v2

Inline and optimize SVG’s from your GraphQL data source

Differences From gatsby-transformer-inline-svg

gatsby-transformer-inline-svg currently only works with Contentful assets and doesn’t work with File nodes, so this plugin aims to be CMS agnostic, it can still work with CMS images if they are added via the gatsby-source-filesystem via the createRemoteFileNode API

Installation

npm i gatsby-transformer-inline-svg

Usage

gatsby-config.js:

module.exports = {
  plugins: [
    'gatsby-transformer-inline-svg-v2'
  ]
}

GraphQL Query:

file {
    childInlineSvg {
        content
    }
    url
}

Rendering:

import React from 'react'

export default function Image({ file }) {
    // inlined SVG
    if (file?.childInlineSvg?.content) {
        return <div dangerouslySetInnerHTML={{ __html: file?.childInlineSvg?.content }} />
    }

    // other images
    return <img src={file.url} alt={alt} />
}
© 2022 Gatsby, Inc.