feat: Simplify github icon and inline the svg

newrelic · Jun 17, 2020 · 8d5fc02 · 8d5fc02
1 parent 30ff430
commit 8d5fc02
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 28 deletions.
diff --git a/src/components/GithHubIcon.js b/src/components/GithHubIcon.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './GithHubIcon.module.scss';
+
+const GithHubIcon = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 15"
+    fill="none"
+    className={cx(styles.icon, className)}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.40075 0C3.31194 0 0 3.44078 0 7.68867C0 11.087 2.12163 13.9661 5.06102 14.9856C5.42903 15.0564 5.56532 14.8204 5.56532 14.6127C5.56532 14.4287 5.56077 13.9472 5.55623 13.3053C3.49819 13.7679 3.06207 12.2764 3.06207 12.2764C2.72586 11.389 2.23975 11.1483 2.23975 11.1483C1.56738 10.6716 2.28974 10.6811 2.28974 10.6811C3.03025 10.7377 3.42551 11.474 3.42551 11.474C4.08427 12.6493 5.15643 12.3094 5.57894 12.1112C5.6471 11.6156 5.83789 11.2758 6.04688 11.0823C4.40683 10.8935 2.68044 10.2327 2.68044 7.28748C2.68044 6.44735 2.96666 5.76296 3.44368 5.22489C3.36644 5.02667 3.11204 4.24789 3.51184 3.19063C3.51184 3.19063 4.13423 2.98296 5.54715 3.97885C6.13775 3.80893 6.76925 3.72398 7.40075 3.71926C8.02768 3.72398 8.66372 3.80893 9.25432 3.97885C10.6672 2.98296 11.2896 3.19063 11.2896 3.19063C11.694 4.24789 11.4396 5.03139 11.3623 5.22489C11.8348 5.76296 12.121 6.44735 12.121 7.28748C12.121 10.2421 10.3901 10.8887 8.74096 11.0823C9.00446 11.3183 9.24524 11.7902 9.24524 12.5077C9.24524 13.5366 9.23615 14.3626 9.23615 14.6174C9.23615 14.8251 9.3679 15.0611 9.74499 14.9856C12.6844 13.9661 14.8015 11.087 14.8015 7.69339C14.8015 3.44078 11.4895 0 7.40075 0Z"
+      fill="#000D0D"
+    />
+  </svg>
+);
+
+GithHubIcon.propTypes = {
+  className: PropTypes.string,
+};
+
+export default GithHubIcon;
diff --git a/src/components/GithHubIcon.module.scss b/src/components/GithHubIcon.module.scss
@@ -0,0 +1,4 @@
+.icon {
+  fill: none;
+  width: var(--icon-size, 15px);
+}
diff --git a/src/components/GlobalHeader.js b/src/components/GlobalHeader.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Link } from 'gatsby';
 import NewRelicLogo from './NewRelicLogo';
+import GithHubIcon from './GithHubIcon';
 import ExternalLink from './ExternalLink';
 
 import styles from './GlobalHeader.module.scss';
@@ -45,12 +46,12 @@ const GlobalHeader = ({ className }) => {
         </div>
 
         <ul className={styles.rightSideButtons}>
-          <li className={`${styles.rightSideButton} ${styles.githubButton}`}>
+          <li className={styles.rightSideButton}>
             <ExternalLink
               href="https://github.com/newrelic/developer-website"
               className={styles.githubButtonLink}
             >
-              GitHub
+              <GithHubIcon />
             </ExternalLink>
           </li>
         </ul>

diff --git a/src/components/GlobalHeader.module.scss b/src/components/GlobalHeader.module.scss
@@ -69,41 +69,18 @@
 }
 
 .rightSideButton {
-  width: 14px;
-  height: 14px;
-  text-indent: 300%;
-  white-space: nowrap;
-  overflow: hidden;
-  padding: 0;
   opacity: 0.45;
-  background-repeat: no-repeat;
-  background-position: center;
-  transition: opacity 0.1s var(--ease-out-quad);
+  transition: opacity 0.2s ease-out;
 
   &:hover {
     cursor: pointer;
     opacity: 0.75;
   }
-
-  &:last-child {
-    padding-right: 0;
-    background-position: right;
-  }
-}
-
-.githubButton {
-  display: block;
-  width: 15px;
-  height: 15px;
-  text-indent: 0;
 }
 
 .githubButtonLink {
-  display: block;
-  background-image: url('../images/icon-github.svg');
-  text-indent: 100%;
-  white-space: nowrap;
-  overflow: hidden;
+  display: flex;
+  align-items: center;
 }
 
 // ==============================================================