Can't make it work - Githubissues

afyaf2 commented 5 years ago

Hey, Apologies for making another one of these but I've been banging my head against the wall trying to make this work. Using this plugin as it was bundled with the universal starter theme and I have a bunch of SVG icons to import.

File structure is as follows: SVGs are inside gatsby-portfolio/content/images/icons/ Component I'm trying to import to is in src/components/Container/container.js

Trying to import icons like so : import CSS3 from './images/icons/css3.svg';

Throwing this error: Module not found: Error: Can't resolve './images/icons/css3.svg' in '/Users/Me/code/portfolio/gatsby-portfolio/src/components/Container

This is how my gatsby.config looks. `
{

  resolve: 'gatsby-source-filesystem',

  options: {

    name: 'content',

    path: `${__dirname}/content`,

  },

},

...

{

  resolve: 'gatsby-plugin-react-svg',

  options: {

    rule: {

      include: /images/,

    },

  },

}

`

Any ideas? I appreciate any help thankyou for reading.

jacobmischka commented 5 years ago

That seems like a general webpack error, I don't think it has anything to do with this plugin. It looks like your path is not correct.

If you're importing from src/components/Container/container.js, then you'll want to use import CSS3 from '../../content/images/icons/css3.svg'.

jacobmischka commented 5 years ago

I'm going to close this, but feel free to write back if you're confident that it's this plugin causing the problem.

zheeeng commented 5 years ago

@jacobmischka ~~includes and exclude option of gatsby-plugin-react-svg@next doesn't take effect. I set include to a doesn't exist path, all imported svg assets are processed to React Component.~~

Sorry for that, I just noticed that the include and exclude rules are moved to the rule option field.

jacobmischka commented 5 years ago

No worries, thanks for writing back!

jacobmischka / gatsby-plugin-react-svg

Can't make it work #13