feat: Use inline svg rather than background image for copy icon in co…

…de snippet
newrelic · Jun 11, 2020 · d601774 · d601774
1 parent df680e2
commit d601774
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 11 deletions.
diff --git 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
@@ -30,23 +30,16 @@
   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;
     outline: none;
   }
 }
 
-.copied {
-  background-position: 88% 50%;
+.copyIcon {
+  margin-right: 0.5rem;
 }