reactjssvggatsbygatsby-image

Why does my SVG image fade in when the page loads?

I added a GitHub icon in SVG format on my homepage. Link here.

And whenever the page loads, the SVG image would "fade-in".

I used the StaticImage component from gatsby-plugin-image, and the .svg file is stored locally. Also, note that I have used css filter to invert the color of the .svg file since I'm using a dark background.

<StaticImage alt="GitHub" src="../images/github-brands.svg" className={layoutStyles.icon}/>

How can I get rid of the "fade-in" effect? Or at least make it transparent?

Solution

  • It's the placeholder property, which by default is set as blurred. You can change it easily by:

    <StaticImage 
   alt="GitHub" 
   src="../images/github-brands.svg" 
   className={layoutStyles.icon}
   placeholder="none"
 />

    It can take the following values: