From 14e6fb84e133fe723c0af49616cead9d2eb52417 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Tue, 16 Jun 2020 16:28:09 -0700
Subject: [PATCH] feat: Use github/edit icons from feather and render them
 inline

---
 src/components/FeatherIcon.js     |  9 +++++++++
 src/components/Footer.js          | 10 +++++-----
 src/components/Footer.module.scss | 22 +++++-----------------
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
index 5143b4793..5c96693d7 100644
--- a/src/components/FeatherIcon.js
+++ b/src/components/FeatherIcon.js
@@ -19,12 +19,21 @@ const FeatherIcon = ({ className, name, size = '1em' }) => {
 };
 
 const ICONS = {
+  edit: (
+    <>
+      <path d="M12 20h9" />
+      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+    </>
+  ),
   copy: (
     <>
       <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
       <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
     </>
   ),
+  github: (
+    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
+  ),
 };
 
 FeatherIcon.propTypes = {
diff --git a/src/components/Footer.js b/src/components/Footer.js
index cabc72864..ca2de7ca1 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -3,6 +3,7 @@ import { Link } from 'gatsby';
 import cx from 'classnames';
 import ExternalLink from './ExternalLink';
 import styles from './Footer.module.scss';
+import FeatherIcon from './FeatherIcon';
 import Logo from './Logo';
 
 const Footer = () => (
@@ -22,13 +23,12 @@ const Footer = () => (
       </div>
 
       <div className={styles.right}>
-        <Link to="/" className={styles.edit}>
+        <Link to="/">
+          <FeatherIcon className={styles.linkIcon} name="edit" size="1rem" />
           Edit this page
         </Link>
-        <ExternalLink
-          href="https://github.com/newrelic/developer-website/issues/new/choose"
-          className={styles.issue}
-        >
+        <ExternalLink href="https://github.com/newrelic/developer-website/issues/new/choose">
+          <FeatherIcon className={styles.linkIcon} name="github" size="1rem" />
           Create an issue
         </ExternalLink>
       </div>
diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss
index b2f52b286..38535c9da 100644
--- a/src/components/Footer.module.scss
+++ b/src/components/Footer.module.scss
@@ -30,7 +30,7 @@
 
 .copyright {
   margin-left: 1rem;
-  padding: 0.75rem 0.5rem;
+  padding-left: 1rem;
   border-left: 1px dotted var(--color-neutrals-700);
 
   @media (max-width: 760px) {
@@ -45,28 +45,16 @@
 
   a {
     color: var(--color-teal-300);
-    margin-left: 1rem;
-    padding: 0.2rem;
     padding-right: 0;
     display: flex;
     align-items: center;
 
-    &:before {
-      content: '';
-      display: inline-block;
-      height: 1rem;
-      width: 1rem;
-      background-repeat: no-repeat;
-      background-position: center center;
-      margin-right: 0.5rem;
+    &:not(:first-child) {
+      margin-left: 1rem;
     }
   }
 }
 
-.edit:before {
-  background-image: url('../images/edit.svg');
-}
-
-.issue:before {
-  background-image: url('../images/github.svg');
+.linkIcon {
+  margin-right: 0.5rem;
 }