How to avoid converting svg to data-uri in Gatsby

Question

I need to use an inline SVG so I can animate it, but the SVG is less than 10KB so Gatsby is converting it to a data-uri. Is there a way to tell Gatsby to not convert a particular resource to a data-uri?

Answer 1

You can use gatsby-plugin-react-svg.

npm install --save gatsby-plugin-react-svg

Add the plugin to your gatsby-config.js, then in your code:

import Icon from './path/icon.svg';

// ...

<Icon />

---

Alternatively, you can also use gatsby-plugin-svgr.

Answer 2

To add to Fabian Schultz's answer

There is Gatsby v2 support for gatsby-plugin-react-svg if you use the @next version

npm install gatsby-plugin-react-svg@next --save

There were 2 tickets opened in the repo

Issue 4

Issue 7