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?
CodePudding user response:
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:
dominantColor
tracedSVG
blurred
none