Add icon for copy button

Got the SVG from: https://icomoon.io/app

Compressed it with svgo (`npm install -g svgo`; see
https://github.com/svg/svgo)

Converted to data URI with: https://gist.github.com/puppybits/1565441

Did consider skipping the base64-encoding step (ie.
https://css-tricks.com/probably-dont-base64-svg/) but decided against
it. It won't work in old browsers, and isn't much of a space saving
anyway.

diff --git a/src/App.css b/src/App.css
index c5cca083c5fd2349556d68dcd6d95f27d73753e7..97037bfde9c040a3abdbf5cd559acf1959541cec 100644 (file)
--- a/src/App.css
+++ b/src/App.css
@@ -20,3 +20,17 @@ body {
   padding-right: 12px;
   text-align: right;
 }
+
+.hextrapolate-copy {
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBmaWxsPSIjNDQ0IiBkPSJNMjAgOFYwSDZMMCA2djE4aDEydjhoMjBWOEgyMHpNNiAyLjgyOFY2SDIuODI4TDYgMi44Mjh6TTIgMjJWOGg2VjJoMTB2NmwtNiA2djhIMnptMTYtMTEuMTcyVjE0aC0zLjE3MkwxOCAxMC44Mjh6TTMwIDMwSDE0VjE2aDZ2LTZoMTB2MjB6Ii8+PC9zdmc+);
+  display: inline-block;
+  height: 16px;
+  margin-left: 8px;
+  overflow: hidden;
+  position: relative;
+  text-indent: -10000px;
+  top: 4px;
+  width: 16px;
+}

diff --git a/src/Field.react.js b/src/Field.react.js
index 2a67b01a0c18931f56849751f1a6434ccc707c93..31a0c9b77b90e9ba4d5341eba31d71f0dbbdd58d 100644 (file)
--- a/src/Field.react.js
+++ b/src/Field.react.js
@@ -86,7 +86,7 @@ export default class Field extends React.Component {
     // doesn't work; see:
     // - https://code.google.com/p/chromium/issues/detail?id=476508
     // - https://github.com/w3c/clipboard-apis/issues/4
-    return <span onClick={this._onCopy}>copy</span>;
+    return <span className="hextrapolate-copy" onClick={this._onCopy}>copy</span>;
   }
 
   render() {