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
69 stars 21 forks source link

query parameter `classIdPrefix: true` not working #40

Open Strangehill opened 4 years ago

Strangehill commented 4 years ago

While this query parameter offers in the svg-react-loader documentation to prefix class and id names with the filename (in case classIdPrefix: true) or with a declared combination of interpolations (such as [name]-[hash:8] being shown in the documentation), it appears that the latter functionality never went from a work-in-progress, and unmerged pull requests, to actual implementation. The first case, simply setting to true is working fine, judging from comments in that repo. In the case of this gatsby plugin I have not gotten this case to work.

Ultimately, I'm trying to solve the common problem of multiple svgs on a page interfering with each other.

jacobmischka commented 4 years ago

Could you post your gatsby-config? Or make your vercel reproduction share its /_src? I don't believe this wrapper plugin should have any effect on the behavior of the underlying library, so if it's not working I would imagine it's an issue with it and not this. But I'd like to confirm that it's being configured correctly first.

Strangehill commented 4 years ago

It could very well be that I never got the configuration right. see: gatsby-config on the repro. currently attempting it like this:

{
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /assets/,
          options: {
            classIdPrefix: true,
          }
        }
      }
    },
0xferit commented 3 years ago

Any updates on this? I have the same issue.

jacobmischka commented 3 years ago

Nope, I haven't looked into it and honestly I don't use Gatsby very much any more these days. Pull requests welcome!

nicolls1 commented 3 years ago

It could very well be that I never got the configuration right. see: gatsby-config on the repro. currently attempting it like this:

{
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /assets/,
          options: {
            classIdPrefix: true,
          }
        }
      }
    },

I just got this working for me with the config:

{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /assets/,
options: {
classIdPrefix: true,
},
},
},
},

Seems to be the same as yours which is interesting. Are you sure your svg is in an 'assets' folder maybe?