feat: Use github/edit icons from feather and render them inline

newrelic · Jun 16, 2020 · 14e6fb8 · 14e6fb8
1 parent 6104e0b
commit 14e6fb8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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;
 }