search

jacobmischka / gatsby-plugin-react-svg

Adds svg-react-loader to gatsby webpack config
https://www.npmjs.com/package/gatsby-plugin-react-svg
MIT License
70 stars 21 forks source link

No instructions on how to use Regex in the options.rule.include #11

Closed ajayns closed 5 years ago

ajayns commented 5 years ago

I have a specific case where I have both SVGs and other formats in my /assets/ folder and so I'd like the plugin to only pick out the .svg files. But I can't find a way to do this with Regex as it keeps throwing errors when used inside gatsby-node.js

Since this is a very common scenario I'd appreciate if there's some documentation on this. And if we have a solution I'd be happy to add the docs.

jacobmischka commented 5 years ago

Sorry, you should be able to just provide any regular expression you wish, as is done in the README. Looks like you want to use something like assets\/.*\.svg.

{
    resolve: 'gatsby-plugin-react-svg',
    options: {
        rule: {
          include: /assets\/.*\.svg/
        }
    }
}

image

What error are you seeing?

ajayns commented 5 years ago

Sorry, I was a bit caught up. Let me check and will get back to you.

ajayns commented 5 years ago

Okay this works great now! Thank you.

Two things I'd like to note though, these are what caused confusion for me as a totally new user:

  1. What did you use to get the regular expression? I was referring https://webpack.js.org/configuration/module/#rule and it's test property just confused me even more. May I'm looking wrong, else if you think this could be a common issue, it'd be good to note.
  2. How to use the SVG loader/see it in action once configured. The svg-react-loader README is a bit confusing if you try to compare it with the use for this plugin. I feel this requires noting so that users can jumpstart and have full idea of how it should work.

I wouldn't mind creating a PR for both these to update the README as per what you think needs to be done :) Thanks again for your help.

jacobmischka commented 5 years ago

I'm happy to accept pull requests to document both of these, but they're both sort of outside of the scope for this package and I unfortunately don't have the bandwidth right now to explain them. Please see some outside documentation on regular expressions for help with the former, and bring up any issues with svg-react-loader documentation in their repository.

Apologies. I'm glad you were able to get the plugin working.