add external icon in sidebar

src/components/Sidebar.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
+import { ReactComponent as External } from '../images/external.svg'
 import styles from './Sidebar.module.scss'
 
 const SidebarLink = ({ link, title, linkClasses }) => {
@@ -13,7 +14,7 @@ const SidebarLink = ({ link, title, linkClasses }) => {
                     target="_blank"
                     rel="noopener noreferrer"
                 >
-                    {title}
+                    {title} <External className={styles.external} />
                 </a>
             )
         } else {

src/components/Sidebar.module.scss

@@ -152,3 +152,10 @@
         border-left-color: $green;
     }
 }
+
+.external {
+    fill: $brand-grey-light;
+    display: inline-block;
+    width: $font-size-mini;
+    height: $font-size-mini;
+}

src/images/external.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="10" viewBox="0 0 9 10">
+  <polygon points="76.674 148.098 75.948 147.373 82.277 141.044 76.562 141.102 76.573 140.066 84.057 139.989 83.981 147.473 82.944 147.484 83.002 141.77" transform="translate(-76 -139)"/>
+</svg>