Gatsby SVGs

[ernestosotelo]

Edit: This issue has been pointed out here: jhamlet/svg-react-loader#102 which seems to be affecting gatsby-plugin-react-svg.

[jonniebigodes]

@ernestosotelo if you don't mind follow this and share the link so that we can take a look at it and track down the actual problem and work on a solution for your issue?

[ernestosotelo]

@jonniebigodes I think I'm going to close this issue and troubleshoot more. I inserted the SVG components inside the Header component initially, and now I inserted the components into the IndexPage component to do additional testing and it rendered in an awful way. It's much more complicated than I thought - or I am missing something regarding using SVG components in Gatsby...

[jonniebigodes]

@ernestosotelo it's entirely up to you, if you want, share a repository emulating the issue you're experiencing so that it can be looked at. Otherwise feel free to close it and come back afterwards and reopen it when you're willing.

[Strangehill]

I'm having this issue (as have many others before). The solution I can't get to work, as I gather from the svg-react-loader docs, and the gatsby-plugin-react-svg docs, is to use query parameter classIdPrefix in gatsby-config to namespace class names and id names. I tried this, as follows:

      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /\.inline\.svg$/,
          options: {
            classIdPrefix: "[name]-[hash:8]__"
          }
        }
      }

but instead of resulting in turning class/id names such as .st4 into .logo-a91$s@Fq__st4 which is what I expected, the resulting name was .[name]-[hash:8]__st4
I hope to have a reproduction ready soon.

[LekoArts]

We're not maintaining this plugin here, please open an issue on their issue tracker. Thanks!