Putting inline SVGs in custom folder

[lesliecdubs]

Hey there -- great plugin! I'd like to organize my inline SVGs in a specific folder (/assets/images/inline-svgs/) as I will be using SVGs both inline and as <img>s.

Whenever I try to customize the include path for this plugin in my gatsby-config.js, I get a console error: Invalid tag: data:image/svg+xml...

How can I customize the include path?

[jacobmischka]

Hi, apologies, I was out of town for a few days recently. I'll take a look at this as soon as I can!

I believe modifying the path as you're doing should be all you need to do, so it looks like a bug. Sorry about that!

[jacobmischka]

Can you please paste what you're using as your include option? It seems to be working as intended for me right now but I may be missing something.

Thanks!

[lesliecdubs]

Thanks for getting back to me! I've tried both include: '/assets/images/**/*' and include: '/assets/images/inline-svgs/'. Site compiles without errors but then when I visit in the browser, I get the JS console error: Invalid tag: data:image/svg+xml....

Can I pass the exact path as a string to include?

[jacobmischka]

It will follow webpack's condition semantics: https://webpack.js.org/configuration/module/#condition

You're getting that error because the SVG is being loaded using url-loader, so you're getting a data url as a string.

Could you please try using a regular expression? Something like include: /assets\/images/ should work!

[lesliecdubs]

Got it, thank you! Working like a charm.

resolve: 'gatsby-plugin-react-svg',
   options: {
      include: /assets\/images\/inline-svgs/
   }
}

[jacobmischka]

Glad to hear it!