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
  

  react-devicon/docs/gatsby-node.js

  Lines 12 to 31 in 9bd894e

  	if (
  	['develop', 'develop-html', 'build-html', 'build-javascript'].includes(
  	stage
  	)
  	) {
  	// Remove svg from url-loader config
  	config.loader(`url-loader`, {
  	test: /\.(jpg|jpeg|png|gif|mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
  	loader: `url`,
  	query: {
  	limit: 10000,
  	name: `static/[name].[hash:8].[ext]`,
  	},
  	})
  	config.loader('raw-loader', {
  	test: /\.svg$/,
  	loader: 'raw-loader',
  	})
  	}
  	return config

[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?