Nodejs.dev: Add Gatsby SVG plugin (gatsby-plugin-react-svg)

[talarviv]

Summary

I go through the code base and found some places that we put SVG elements directly into the code for example:
https://github.com/nodejs/nodejs.dev/blob/8ecb5e3781e17260f73480339304cef26b5e17cc/src/components/Footer/index.tsx#L117-L128

I would like to suggest adding gatsby-plugin-react-svg. Then we can reuse SVG (SVG will act as components). second, this will reduce the complexity of the components code.

I would like to help with this if you all agree, any thoughts?

[lidoravitan]

IMO, it sounds great!
I think it could replace the usage of img elements to render SVG's. So we could avoid these disadvantages as well:

• You cannot manipulate the image with JavaScript.
• If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)
• You cannot restyle the image with CSS pseudoclasses (like :focus). (reference: MDN)

[benhalverson]

What's the advantage over doing?
import dotsIllustration from '../images/illustrations/dots.svg';
We are only using this image on the homepage

[talarviv]

The point is not for places that we are using it once. Although, in the future those SVGs may appear more than once in different places. img element could not fit in this case when the requirements would be for a different fills.
For example: Github icon that appears in both the Header and the Footer component, we couldn't use img there because we want to change the SVG's fill. So, we could see duplicated code for this Github SVG element

**the pattern of using svg-loader implemented on create-react-app as well.

[marcustisater]

I am in favor of adding this. Feel free to work on this.