Icons not appearing in gatsbyJS

[kavimaluskam]

When i import the icon, it eventually vender the source string: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48ZyBmaWxsPSIjNjFEQU....... in my web page,

While i tried to copy the svg source code like: https://github.com/fpoumian/react-devicon/blob/master/src/components/docker/original/DockerOriginal.svg and render it in my project and it works.... any idea about this?

[vinaypuppal]

@kavimaluskam You need to configure Gatsby with a Webpack loader that can load inline SVGs

• Install https://github.com/webpack-contrib/raw-loader
• And use this config https://github.com/fpoumian/react-devicon/blob/9bd894e08e3d5c3ae9cf49faa2878fd24bee0dc4/docs/gatsby-node.js#L12-L31

[thidasapankaja]

@vinaypuppal I got the same issue and followed your answer, but still the same issue. It doesn't display the icon, but only the svg source like data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48ZyBmaWxsPSIjNjFEQU....... in Any fix ?

[Pranav2612000]

Same issue here were you able to fix it? I tried using gatsby-plugin-svgr and gatsby-plugin-react-svg but still wasn't able to fix the issue. Using gatsby-plugin-react-svg I received the following error: TypeError: Object.keys(...).filter(...).reduce(...).trim is not a function. Is there any way to fix this?