merge !138

resolves #163 reference copy icon in source toolbox using img tag instead of svg+use

Author: mojavelinux

src/css/doc.css

@@ -626,13 +626,20 @@ h1.page + aside.toc.embedded {
   height: 1em;
 }
 
-.doc .source-toolbox .copy-button svg {
+.doc .source-toolbox .copy-icon {
   flex: none;
-  fill: currentColor;
   width: inherit;
   height: inherit;
 }
 
+.doc .source-toolbox img.copy-icon {
+  filter: invert(50.2%);
+}
+
+.doc .source-toolbox svg.copy-icon {
+  fill: currentColor;
+}
+
 .doc .source-toolbox .copy-toast {
   flex: none;
   position: relative;

src/js/06-copy-to-clipboard.js

@@ -4,6 +4,7 @@
   var CMD_RX = /^\$ (\S[^\\\n]*(\\\n(?!\$ )[^\\\n]*)*)(?=\n|$)/gm
   var LINE_CONTINUATION_RX = /( ) *\\\n *|\\\n( ?) */g
   var TRAILING_SPACE_RX = / +$/gm
+  var config = (document.getElementById('site-script') || { dataset: {} }).dataset
 
   ;[].slice.call(document.querySelectorAll('.doc pre.highlight, .doc .literalblock pre')).forEach(function (pre) {
     var code, language, lang, copy, toast, toolbox
@@ -30,13 +31,20 @@
     if (window.navigator.clipboard) {
       ;(copy = document.createElement('button')).className = 'copy-button'
       copy.setAttribute('title', 'Copy to clipboard')
-      var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
-      svg.setAttribute('aria-hidden', 'true')
-      svg.setAttribute('class', 'copy-icon')
-      var use = document.createElementNS('http://www.w3.org/2000/svg', 'use')
-      use.setAttribute('href', window.uiRootPath + '/img/octicons-16.svg#icon-clippy')
-      svg.appendChild(use)
-      copy.appendChild(svg)
+      if (config.svgAs === 'svg') {
+        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+        svg.setAttribute('class', 'copy-icon')
+        var use = document.createElementNS('http://www.w3.org/2000/svg', 'use')
+        use.setAttribute('href', window.uiRootPath + '/img/octicons-16.svg#icon-clippy')
+        svg.appendChild(use)
+        copy.appendChild(svg)
+      } else { // config.svgAs === 'img'
+        var img = document.createElement('img')
+        img.src = window.uiRootPath + '/img/octicons-16.svg#view-clippy'
+        img.alt = 'copy icon'
+        img.className = 'copy-icon'
+        copy.appendChild(img)
+      }
       ;(toast = document.createElement('span')).className = 'copy-toast'
       toast.appendChild(document.createTextNode('Copied!'))
       copy.appendChild(toast)