From d6017745d45ddb490d5cf9bc747f6dd556575aa1 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 12:30:51 -0700
Subject: [PATCH] feat: Use inline svg rather than background image for copy
 icon in code snippet

---
 src/components/CodeSnippet.js          |  5 +++--
 src/components/CodeSnippet.module.scss | 11 ++---------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js
index fc651d63a..29c58b8a8 100644
--- a/src/components/CodeSnippet.js
+++ b/src/components/CodeSnippet.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import github from 'prism-react-renderer/themes/github';
 import styles from './CodeSnippet.module.scss';
-import cx from 'classnames';
 import useFormattedCode from '../hooks/useFormattedCode';
+import FeatherIcon from './FeatherIcon';
 
 const copyCode = (code, setCopied) => {
   const textArea = document.createElement('textarea');
@@ -47,8 +47,9 @@ const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
         </Highlight>
       </div>
       {copy !== 'false' && (
-        <div className={cx({ [styles.copied]: copied }, styles.copyBar)}>
+        <div className={styles.copyBar}>
           <button type="button" onClick={() => copyCode(children, setCopied)}>
+            <FeatherIcon name="copy" size="1rem" className={styles.copyIcon} />
             {copied ? 'Copied!' : 'Copy output'}
           </button>
         </div>
diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss
index 49376c175..89c37fdaa 100644
--- a/src/components/CodeSnippet.module.scss
+++ b/src/components/CodeSnippet.module.scss
@@ -30,16 +30,9 @@
   justify-content: flex-end;
   align-items: center;
   background: var(--color-neutrals-200);
-  height: 35px;
-  background-image: url('../images/copy.svg');
-  background-size: 1rem;
-  background-repeat: no-repeat;
-  background-position: 83% 50%;
 
   button {
-    padding-right: 1rem;
     font-size: 0.75rem;
-    font-family: var(--primary-font-family);
     color: var(--color-brand-800);
     background: none;
     border: none;
@@ -47,6 +40,6 @@
   }
 }
 
-.copied {
-  background-position: 88% 50%;
+.copyIcon {
+  margin-right: 0.5rem;
 }