feat(SVG-Features): Add react-icons for svg feat's

The feature images on the homepage were previously using some png images
that didn't scale well to different resolutions. An issue was opened
surrounding changing them to svg icons. However, the initial icons
suggested weren't licensed appropriately. Discussion seems to have
circled around a couple of differnt icons available to the `react-icons`
package, so this PR puts some alternatively licensed icons into place.

- Add the icons, and remove the old pngs
- Shift to some different icons so that all our icon are sourced from
  libraries that use the MIT license
- Add start of a decision record outlining the use of react-icons

docs/adr/0001-sourcing-icons.md

@@ -0,0 +1,90 @@
+# Sourcing Icons
+
+* Status: Proposed
+* Deciders: (tbd)
+* Date: 2020-10-03
+
+Technical Story: Related to [914](https://github.com/nodejs/nodejs.dev/pull/914)
+
+## Context and Problem Statement
+
+Icons can come in a variety of formats, but SVG is arguably best because it
+scales and looks crisp at any size.
+
+Using a library like react-icons makes it easy to import icons from a range
+of libraries without having to worry about manually curating and optimizing
+files, but we still want to be careful about which licenses we're working
+with.
+
+## Decision Drivers <!-- optional -->
+
+* We have a few icons already included, but imported manually
+* We don't have any systems currently in place to ensure new icons added
+  manually are processed consistently
+* There will often be a need to source new icons for different purposes (so
+  having a library or two on hand isn't a bad idea)
+* The icons (in react-icons specifically) are made available via es-style
+  imports which ensures you're only adding weight for the individual icons
+  actually used
+
+## Open Questions to Address
+
+* Should we use this for ALL icons (and replace any existing icons): can be
+  tackled on an icon by icon basis
+
+## Considered Options
+
+* Always import manually on a case by case basis
+  * Potentially error prone
+  * Would require docs/pipeline for how to add new icons to system
+* Do Nothing?
+
+## Decision Outcome
+
+TODO: UPDATE:
+
+Chosen option: "\[option 1\]", because \[justification. e.g., only option, which meets k.o. criterion decision driver | which resolves force force | … | comes out best (see below)\].
+
+### Positive Consequences <!-- optional -->
+
+* \[e.g., improvement of quality attribute satisfaction, follow-up decisions required, …\]
+* …
+
+### Negative Consequences <!-- optional -->
+
+* \[e.g., compromising quality attribute, follow-up decisions required, …\]
+* …
+
+## Pros and Cons of the Options <!-- optional -->
+
+### \[option 1\]
+
+\[example | description | pointer to more information | …\] <!-- optional -->
+
+* Good, because \[argument a\]
+* Good, because \[argument b\]
+* Bad, because \[argument c\]
+* … <!-- numbers of pros and cons can vary -->
+
+### \[option 2\]
+
+\[example | description | pointer to more information | …\] <!-- optional -->
+
+* Good, because \[argument a\]
+* Good, because \[argument b\]
+* Bad, because \[argument c\]
+* … <!-- numbers of pros and cons can vary -->
+
+### \[option 3\]
+
+\[example | description | pointer to more information | …\] <!-- optional -->
+
+* Good, because \[argument a\]
+* Good, because \[argument b\]
+* Bad, because \[argument c\]
+* … <!-- numbers of pros and cons can vary -->
+
+## Links <!-- optional -->
+
+* [Link type](link-to-adr.md) <!-- example: Refined by [ADR-0005](0005-example.md) -->
+* … <!-- numbers of links can vary -->

package.json

@@ -41,6 +41,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",
+    "react-icons": "^3.11.0",
     "react-tabs": "3.1.0",
     "throttle-debounce": "^2.3.0",
     "typescript": "3.9.2"

src/pages/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { graphql } from 'gatsby';
+import { IoLogoNodejs, IoMdGitPullRequest, IoMdRocket } from 'react-icons/io';
 
 import Hero from '../components/Hero';
 import Layout from '../components/Layout';
@@ -15,23 +16,47 @@ import leafsIllustrationMiddle from '../images/illustrations/leafs-middle.svg';
 import leafsIllustrationBack from '../images/illustrations/leafs-back.svg';
 import dotsIllustration from '../images/illustrations/dots.svg';
 import InstallTabs from '../components/InstallTabs';
-
-import featureImg1 from '../images/feature-img-1.png';
-import featureImg2 from '../images/feature-img-2.png';
-import featureImg3 from '../images/feature-img-3.png';
 import GetStartedSection from '../components/GetStartedSection';
 
+interface NodeFeatureProps {
+  icon?: ReactElement;
+  heading: string;
+  description: string;
+}
+
+const styled = (icon: ReactElement): ReactElement =>
+  React.cloneElement(icon, { alt: 'Node Feature', className: 'feature-icon' });
+
+const features = [
+  {
+    icon: styled(<IoLogoNodejs />),
+    heading: 'JavaScript',
+    description:
+      'Node.js provides support for the JavaScript programming language',
+  },
+  {
+    icon: styled(<IoMdGitPullRequest />),
+    heading: 'Open Source',
+    description:
+      'Node.js is open source and actively maintained by contributors all over the world',
+  },
+  {
+    icon: styled(<IoMdRocket />),
+    heading: 'Everywhere',
+    description: 'Node.js has been adapted to work in a wide variety of places',
+  },
+];
+
 const NodeFeature = ({
-  img,
-  featureText,
-  featureHeader,
-  featureAltText,
-}: Props): JSX.Element => {
+  icon,
+  heading,
+  description,
+}: NodeFeatureProps): JSX.Element => {
   return (
     <div className="node-features__feature">
-      <img src={img} alt={featureAltText} />
-      <h4>{featureHeader}</h4>
-      <p>{featureText}</p>
+      {icon && icon}
+      <h4>{heading}</h4>
+      <p>{description}</p>
     </div>
   );
 };
@@ -87,24 +112,14 @@ export default function Index({
         </section>
 
         <section className="node-features">
-          <NodeFeature
-            img={featureImg1}
-            featureText={nodeFeature1}
-            featureHeader={nodeFeatureHeader1}
-            featureAltText={nodeFeatureAltText}
-          />
-          <NodeFeature
-            img={featureImg2}
-            featureText={nodeFeature2}
-            featureHeader={nodeFeatureHeader2}
-            featureAltText={nodeFeatureAltText}
-          />
-          <NodeFeature
-            img={featureImg3}
-            featureText={nodeFeature3}
-            featureHeader={nodeFeatureHeader3}
-            featureAltText={nodeFeatureAltText}
-          />
+          {features.map(feature => (
+            <NodeFeature
+              key={feature.heading}
+              icon={feature.icon}
+              heading={feature.heading}
+              description={feature.description}
+            />
+          ))}
         </section>
 
         <GetStartedSection
@@ -118,14 +133,6 @@ export default function Index({
     </Layout>
   );
 }
-
-interface Props {
-  img: string;
-  featureText: string;
-  featureHeader: string;
-  featureAltText: string;
-}
-
 interface HomepageProps {
   data: HomepageData;
 }

src/styles/index.scss

@@ -106,6 +106,10 @@
   max-width: 248px;
   margin: 0 2em;
   text-align: center;
+
+  img {
+    width: 65%;
+  }
 }
 
 .trusted-by {
@@ -190,3 +194,9 @@
     }
   }
 }
+
+.feature-icon {
+  min-width: 120px;
+  height: auto;
+  opacity: 0.75;
+}