Unable to load SVG's from custom folder about gatsby-plugin-react-svg HOT 5 OPEN

Same problem here.

from gatsby-plugin-react-svg.

Apparently if your config match something that isn't SVG you get that error, maybe on svg folder has a file that isn't a SVG file. Thats an opinion based on experience, I don't delve in the code.

from gatsby-plugin-react-svg.

It is because .svg files are still being consumed by the url-loader plugin. Here is why:

The problem is in this conditional configuration:

const newUrlLoaderRule = (include || exclude) ? {
			...imgsRule,
			include: exclude,
			exclude: include
		} : {
			...imgsRule,
			test: new RegExp(imgsRule.test.toString().replace('svg|', '').slice(1, -1))
		}

If you explicitly specify include: /images\/svgs/, the final url loader configuration will be:

 {
  use: [
    {
      loader: '/.../node_modules/url-loader/dist/cjs.js',
      options: [Object]
    }
  ],
  test: /\.(ico|svg|jpg|jpeg|png|gif|webp|avif)(\?.*)?$/,
  include: undefined,
  exclude: /images\/svgs/
}

If you leave options empty, like this:

 plugins: [
    {
      resolve: "gatsby-plugin-react-svg",
      options: {},
    },

it will be:

{
  use: [
    {
      loader: '/.../node_modules/url-loader/dist/cjs.js',
      options: [Object]
    }
  ],
  test: /\.(ico|jpg|jpeg|png|gif|webp|avif)(\?.*)?$/
}

Here the test entry is modified and skips svg from being consumed by the url-loader.

So it seems that having |svg| in the test both with exclude/include regexes is not working as expected - url-loader is still processing those images before svg-loader. That is probably a bug.

from gatsby-plugin-react-svg.

Honestly, I don't use gatsby anymore these days, and I haven't used this library myself since before the 3.0 release, but specifying include works fine for me in ^2.0 in older gatsby projects and the logic still seems correct to me; when specifying include, those paths will be excluded by url-loader, so I still don't see what the issue is despite your examples above.

Pull requests welcome, surely.

Edit: I updated an older project to use gatsby 3 and the most recent version of this plugin, and specifying include still indeed works.

gatsby-config.js:

		{
			resolve: 'gatsby-plugin-react-svg',
			options: {
				rule: {
					include: /icons/
				}
			}
		},

index.js:

...
import TeamIcon from '../images/icons/team.svg';

export default function IndexPage({ data }) {
	return (
		<Layout
			title={data.site.siteMetadata.title}
			className="home"
		>
			<TeamIcon />
		</Layout>
	);
}

SVG icon is rendered correctly.

Same include but with this config results in an error:

		{
			resolve: 'gatsby-plugin-react-svg',
			options: {
				rule: {
					include: /icfons/
				}
			}
		},

So I'm not sure what's going on causing it to not work for you.

from gatsby-plugin-react-svg.

I have the same issue.

from gatsby-plugin-react-svg.