configure build to preserve IDs on icon defs in SVG

Author: mojavelinux

gulp.d/tasks/build.js

@@ -113,7 +113,12 @@ module.exports = (src, dest, preview) => () => {
             imagemin.jpegtran(),
             imagemin.optipng(),
             imagemin.svgo({
-              plugins: [{ removeUselessDefs: false }, { removeViewBox: false }, { removeDesc: false }],
+              plugins: [
+                { cleanupIDs: { preservePrefixes: ['icon-'] } },
+                { removeUselessDefs: false },
+                { removeViewBox: false },
+                { removeDesc: false },
+              ],
             }),
           ].reduce((accum, it) => (it ? accum.concat(it) : accum), [])
         )

src/img/octicons.svg

@@ -28,7 +28,7 @@
     svg.setAttribute('class', 'copy-icon')
     svg.setAttribute('viewBox', '0 0 16 16')
     var use = document.createElementNS('http://www.w3.org/2000/svg', 'use')
-    use.setAttribute('href', window.uiRootPath + '/img/octicons.svg#clippy-16')
+    use.setAttribute('href', window.uiRootPath + '/img/octicons.svg#icon-clippy-16')
     svg.appendChild(use)
     copy.appendChild(svg)
     ;(toast = document.createElement('span')).className = 'copy-toast'

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

@@ -83,7 +83,7 @@
           --}}
           <a class="navbar-item" href="https://github.com/asciidoctor" target="_blank" rel="noopener">
             <span class="icon">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><use href="{{{uiRootPath}}}/img/octicons.svg#mark-github"></use></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><use href="{{{uiRootPath}}}/img/octicons.svg#icon-mark-github"></use></svg>
             </span>
           </a>
         </div>