edit icon

src/components/DocFooter.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { ReactComponent as Pencil } from '../images/pencil.svg'
 import styles from './DocFooter.module.scss'
 
 const DocFooter = ({ post }) => (
@@ -9,7 +10,7 @@ const DocFooter = ({ post }) => (
                 post.parent.relativePath
             }`}
         >
-            Edit on GitHub
+            <Pencil /> Edit this page on GitHub
         </a>
     </footer>
 )

src/components/DocFooter.module.scss

@@ -13,5 +13,17 @@
         font-family: $font-family-button;
         text-transform: uppercase;
         color: $brand-grey-light;
+
+        &:hover,
+        &:focus {
+            color: $brand-pink;
+        }
+
+        svg {
+            display: inline-block;
+            margin-right: $spacer / 10;
+            margin-bottom: -1px;
+            fill: $brand-grey-light;
+        }
     }
 }

src/images/pencil.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
+  <path fill-rule="evenodd" d="M23.782503,105.768469 C23.782503,105.768469 25.325503,99.2184687 25.346503,99.1814687 L30.971503,104.806469 C30.933503,104.826469 24.383503,106.369469 24.383503,106.369469 C24.207503,106.410469 24.033503,106.355469 23.915503,106.236469 C23.793503,106.113469 23.742503,105.936469 23.782503,105.768469 Z M39.2670353,85.2275377 L39.9744353,84.5206378 L45.6296353,90.1798378 L44.9222353,90.8867378 L39.2670353,85.2275377 Z M26.0371733,98.4571969 L38.557793,85.9365772 L44.214593,91.5933771 L31.6939733,104.113997 L26.0371733,98.4571969 Z M46.336503,89.4724688 L40.679503,83.8154687 L41.033503,83.4634688 C41.505503,82.9904688 42.133503,82.7304688 42.801503,82.7304688 C43.469503,82.7304688 44.097503,82.9894688 44.569503,83.4634688 L46.690503,85.5834687 C47.665503,86.5584688 47.665503,88.1444688 46.690503,89.1184688 L46.336503,89.4724688 Z" transform="translate(-23 -82)"/>
+</svg>