From 76c39cfcd34f3cb0207afed3ab3f019aa9299f82 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Thu, 4 Jan 2018 00:20:34 +0200
Subject: [PATCH] SVG instead of inlining every time

---
 docs/clipboard.svg    | 1 +
 docs/mini/flavor.scss | 2 +-
 scripts/web.js        | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 docs/clipboard.svg

diff --git a/docs/clipboard.svg b/docs/clipboard.svg
new file mode 100644
index 000000000..478a450ef
--- /dev/null
+++ b/docs/clipboard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f8f8f8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
diff --git a/docs/mini/flavor.scss b/docs/mini/flavor.scss
index fa6bc4348..5fcc7100e 100644
--- a/docs/mini/flavor.scss
+++ b/docs/mini/flavor.scss
@@ -221,7 +221,7 @@ label.#{$collapse-name} {
 button.primary.clipboard-copy {
   width: 100%;
   margin-left: 0;
-  > svg {
+  > img {
     vertical-align: bottom;
   }
 }
diff --git a/scripts/web.js b/scripts/web.js
index 8ae8a3a47..eeb848d9b 100644
--- a/scripts/web.js
+++ b/scripts/web.js
@@ -164,7 +164,7 @@ try {
             .replace(/<h3/g, `<h3 id="${taggedSnippet[0].toLowerCase()}" class="section double-padded"`)
             .replace(/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm, (match, p1) => `<pre class="language-js">${Prism.highlight(unescapeHTML(p1), Prism.languages.javascript)}</pre>`)
             .replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
-          '<button class="primary clipboard-copy"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>&nbsp;Copy to clipboard</button>' +
+          '<button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard">&nbsp;Copy to clipboard</button>' +
           '</div></div>';
     } else {
       output += md
@@ -179,7 +179,7 @@ try {
             .replace(/<\/h3>/g, '</h3><div class="section double-padded">')
             .replace(/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm, (match, p1) => `<pre class="language-js">${Prism.highlight(unescapeHTML(p1), Prism.languages.javascript)}</pre>`)
             .replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
-          '<button class="primary clipboard-copy"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>&nbsp;Copy to clipboard</button>' +
+          '<button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard">&nbsp;Copy to clipboard</button>' +
           '</div></div>';
     }
   }