jacobmischka/gatsby-plugin-react-svg

query parameter `classIdPrefix: true` not working

Strangehill opened this issue · 5 comments

Strangehill commented

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

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

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

Any updates on this? I have the same issue.

jacobmischka commented

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

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?

  • 👍1