Replace all remaining PNG UI icons with SVGs

assets/javascripts/templates/notif_tmpl.coffee

@@ -1,6 +1,9 @@
 notif = (title, html) ->
   html = html.replace /<a /g, '<a class="_notif-link" '
-  """<h5 class="_notif-title">#{title}</h5>#{html}<button type="button" class="_notif-close" title="Close">Close</a>"""
+  """ <h5 class="_notif-title">#{title}</h5>
+      #{html}
+      <button type="button" class="_notif-close" title="Close"><svg><use xlink:href="#icon-close"/></svg>Close</a>
+  """
 
 textNotif = (title, message) ->
   notif title, """<p class="_notif-text">#{message}"""

assets/javascripts/templates/path_tmpl.coffee

@@ -1,4 +1,4 @@
-arrow = """<svg class="_path-arrow"><use xlink:href="#dir-icon"/></svg>"""
+arrow = """<svg class="_path-arrow"><use xlink:href="#icon-dir"/></svg>"""
 
 app.templates.path = (doc, type, entry) ->
   html = """<a href="#{doc.fullPath()}" class="_path-item _icon-#{doc.icon}">#{doc.fullName}</a>"""

assets/javascripts/templates/sidebar_tmpl.coffee

@@ -1,6 +1,6 @@
 templates = app.templates
 
-arrow = """<svg class="_list-arrow"><use xlink:href="#dir-icon"/></svg>"""
+arrow = """<svg class="_list-arrow"><use xlink:href="#icon-dir"/></svg>"""
 
 templates.sidebarDoc = (doc, options = {}) ->
   link  = """<a href="#{doc.fullPath()}" class="_list-item _icon-#{doc.icon} """

assets/javascripts/views/content/entry_page.coffee

@@ -34,7 +34,7 @@ class app.views.EntryPage extends app.View
 
     $.batchUpdate @el, =>
       @subview.render(content, fromCache)
-      @addClipboardLinks() unless fromCache
+      @addCopyButtons() unless fromCache
       return
 
     if app.disabledDocs.findBy 'slug', @entry.doc.slug
@@ -44,13 +44,15 @@ class app.views.EntryPage extends app.View
     @trigger 'loaded'
     return
 
-  addClipboardLinks: ->
-    unless @clipBoardLink
-      @clipBoardLink = document.createElement('a')
-      @clipBoardLink.className = '_pre-clip'
-      @clipBoardLink.title = 'Copy to clipboard'
-      @clipBoardLink.tabIndex = -1
-    el.appendChild(@clipBoardLink.cloneNode()) for el in @findAllByTag('pre')
+  addCopyButtons: ->
+    unless @copyButton
+      @copyButton = document.createElement('button')
+      @copyButton.innerHTML = '<svg><use xlink:href="#icon-copy"/></svg>'
+      @copyButton.type = 'button'
+      @copyButton.className = '_pre-clip'
+      @copyButton.title = 'Copy to clipboard'
+      @copyButton.setAttribute 'aria-label', 'Copy to clipboard'
+    el.appendChild @copyButton.cloneNode(true) for el in @findAllByTag('pre')
     return
 
   polyfillMathML: ->

assets/stylesheets/application-dark.css.scss

@@ -1,5 +1,3 @@
-//= depend_on icons.png
-//= depend_on icons@2x.png
 //= depend_on docs-1.png
 //= depend_on docs-1@2x.png
 //= depend_on docs-2.png

assets/stylesheets/application.css.scss

@@ -1,5 +1,3 @@
-//= depend_on icons.png
-//= depend_on icons@2x.png
 //= depend_on docs-1.png
 //= depend_on docs-1@2x.png
 //= depend_on docs-2.png

assets/stylesheets/components/_content.scss

@@ -367,20 +367,21 @@
   pre:hover > & { display: block; }
   &:hover { opacity: 1; }
 
+  > svg { @extend %svg-icon; }
+
   @if $style == 'dark' {
-    &:before { @extend %icon, %icon-clipboard-white; }
+    > svg { fill: white; }
   } @else {
-    &:before { @extend %icon, %icon-clipboard; }
+    > svg { fill: black; }
   }
 
-  &._pre-clip-success, &._pre-clip-error {
-    &:before { display: none; }
-    &:after {
-      content: 'Copied';
-      padding-right: .25rem;
-    }
+  &._pre-clip-success > svg,
+  &._pre-clip-error > svg {
+    display: none;
   }
-  &._pre-clip-error:after { content: 'Error'; }
+
+  &._pre-clip-success:before { content: 'Copied'; }
+  &._pre-clip-error:before { content: 'Error'; }
 }
 
 ._btn {

assets/stylesheets/components/_header.scss

@@ -46,12 +46,9 @@
   }
 
   > svg {
-    display: inline-block;
-    vertical-align: top;
     width: 1.5rem;
     height: 1.5rem;
-    fill: currentColor;
-    pointer-events: none;
+    @extend %svg-icon;
   }
 }
 
@@ -144,17 +141,20 @@
   padding: .5rem 0 .5rem .5rem;
   @extend %border-box;
 
-  &:before {
+  > svg {
     position: absolute;
     z-index: 1;
-    top: calc(1rem - 1px);
-    left: 1rem;
-    opacity: .4;
-    pointer-events: none;
+    top: .875rem;
+    left: .875rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    opacity: .42;
+    @extend %svg-icon;
+
     @if $style == 'dark' {
-      @extend %icon, %icon-search-white;
+      fill: white;
     } @else {
-      @extend %icon, %icon-search;
+      fill: black;
     }
   }
 }
@@ -190,24 +190,24 @@
   position: absolute;
   top: .5em;
   right: 0;
-  width: 2rem;
+  width: 1.75rem;
   height: 2rem;
-  opacity: .3;
+  opacity: .42;
   @extend %hide-text;
 
-  &:hover { opacity: .5; }
+  &:hover { opacity: .7; }
 
-  &:before {
+  > svg {
     position: absolute;
     top: .5rem;
-    left: .5rem;
-    @extend %icon;
+    left: .375rem;
+    @extend %svg-icon;
   }
 
   @if $style == 'dark' {
-    &:before { @extend %icon-close-white; }
+    > svg { fill: white; }
   } @else {
-    &:before { @extend %icon-clear; }
+    > svg { fill: black; }
   }
   ._search-active > & { display: block; }
 }

assets/stylesheets/components/_mobile.scss

@@ -52,10 +52,11 @@
     padding-right: .125rem;
     padding-left: .125rem;
 
-    &:before { left: .625rem; }
+    > svg { left: .5rem; }
   }
 
   ._search-tag { left: .5rem; }
+  ._search-clear > svg { left: .25rem; }
 
   // Sidebar
 

assets/stylesheets/components/_notif.scss

@@ -49,11 +49,12 @@
   opacity: .9;
   @extend %hide-text;
 
-  &:before {
+  > svg {
     position: absolute;
     top: .625rem;
     left: .625rem;
-    @extend %icon, %icon-close-white;
+    fill: white;
+    @extend %svg-icon;
   }
 
   &:hover { opacity: 1; }

assets/stylesheets/components/_settings.scss

@@ -91,13 +91,10 @@
   @extend %border-box;
 
   > svg {
-    display: inline-block;
-    vertical-align: top;
     width: 1.5rem;
     height: 1.5rem;
     margin-right: .125rem;
-    fill: currentColor;
-    pointer-events: none;
+    @extend %svg-icon;
   }
 }
 

assets/stylesheets/global/_classes.scss

@@ -139,15 +139,20 @@
 
 %external-link {
   &:after {
+    content: '';
     display: inline-block;
-    width: .5rem;
-    height: .4375rem;
-    margin: .125rem 0 0 .0625rem;
     vertical-align: top;
+    width: .5rem;
+    height: .5rem;
+    margin: .125rem 0 0 .125rem;
+    background-size: .5rem .5rem;
+    pointer-events: none;
+
+    // <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15,15H2V6h2.595c0,0,0.689-0.896,2.17-2H1C0.447,4,0,4.449,0,5v11c0,0.553,0.447,1,1,1h15c0.553,0,1-0.447,1-1v-3.746 l-2,1.645V15z M13.361,8.05v3.551L20,6.4l-6.639-4.999v3.131C5.3,4.532,5.3,12.5,5.3,12.5C7.582,8.752,8.986,8.05,13.361,8.05z"/></svg>
     @if $style == 'dark' {
-      @extend %icon, %icon-link-white;
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
     } @else {
-      @extend %icon, %icon-link;
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
     }
   }
 }

assets/stylesheets/global/_icons.scss

@@ -1,10 +1,10 @@
-%icon {
-  content: '';
-  display: block;
+%svg-icon {
+  display: inline-block;
+  vertical-align: top;
   width: 1rem;
   height: 1rem;
-  background-image: image-url('icons.png');
-  background-size: 4rem 2rem;
+  pointer-events: none;
+  fill: currentColor;
 }
 
 %doc-icon {
@@ -16,12 +16,9 @@
   background-size: 10rem 10rem;
 }
 
-%doc-icon-2 {
-  background-image: image-url('docs-2.png') !important;
-}
+%doc-icon-2 { background-image: image-url('docs-2.png') !important; }
 
 @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-  %icon { background-image: image-url('icons@2x.png'); }
   %doc-icon { background-image: image-url('docs-1@2x.png'); }
   %doc-icon-2 { background-image: image-url('docs-2@2x.png') !important; }
 }
@@ -33,15 +30,6 @@
   }
 }
 
-%icon-clipboard             { background-position: 0 0; }
-%icon-search                { background-position: -1rem 0; }
-%icon-link                  { background-position: -2.25rem -.25rem; }
-%icon-clear                 { background-position: -3rem 0; }
-%icon-clipboard-white       { background-position: 0 -1rem; }
-%icon-search-white          { background-position: -1rem -1rem; }
-%icon-close-white           { background-position: -2rem -1rem; }
-%icon-link-white            { background-position: -3.25rem -1.25rem; }
-
 ._icon-jest:before          { background-position: 0 0; }
 ._icon-liquid:before        { background-position: -1rem 0; }
 ._icon-openjdk:before       { background-position: -2rem 0; }

lib/app.rb

@@ -190,8 +190,6 @@ class App < Sinatra::Application
         javascript_path('application', asset_host: false),
         stylesheet_path('application'),
         stylesheet_path('application-dark'),
-        image_path('icons.png'),
-        image_path('icons@2x.png'),
         image_path('docs-1.png'),
         image_path('docs-1@2x.png'),
         image_path('docs-2.png'),

public/icons/ui/clear/SOURCE

@@ -1 +0,0 @@
-http://www.entypo.com/

public/icons/ui/clipboard-white/SOURCE

@@ -1 +0,0 @@
-https://github.com/github/octicons/blob/master/svg/clippy.svg

public/icons/ui/clipboard/SOURCE

@@ -1 +0,0 @@
-https://github.com/github/octicons/blob/master/svg/clippy.svg

public/icons/ui/close-white/SOURCE

@@ -1 +0,0 @@
-http://www.entypo.com/

public/icons/ui/link-white/SOURCE

@@ -1 +0,0 @@
-http://www.entypo.com/

public/icons/ui/link/SOURCE

@@ -1 +0,0 @@
-http://www.entypo.com/

public/icons/ui/search-white/SOURCE

@@ -1 +0,0 @@
-http://www.entypo.com/

public/icons/ui/search/SOURCE

@@ -1 +0,0 @@
-http://www.entypo.com/

views/app.erb

@@ -1,21 +1,22 @@
 <div class="_app" role="application">
   <header class="_header" role="banner">
     <button type="button" aria-label="Toggle navigation" class="_header-btn" data-toggle-sidebar hidden>
-      <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg>
+      <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
     </button>
     <form class="_search" role="search">
+      <svg><use xlink:href="#icon-search"/></svg>
       <input type="search" name="q" class="_search-input" placeholder="Search&hellip;" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" maxlength="30" aria-label="Search">
-      <button type="reset" class="_search-clear" title="Clear search">Clear search</button>
+      <button type="reset" class="_search-clear" title="Clear search"><svg><use xlink:href="#icon-close"/></svg>Clear search</button>
       <div class="_search-tag"></div>
     </form>
     <button type="button" aria-label="Back" class="_header-btn" data-back hidden>
-      <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg>
+      <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
     </button>
     <button type="button" aria-label="Forward" class="_header-btn _forward-btn" data-forward hidden>
-      <svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></svg>
+      <svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
     </button>
     <button type="button" aria-label="Toggle menu" title="Toggle menu" class="_header-btn _menu-btn" data-toggle-menu>
-      <svg viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
+      <svg viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
     </button>
     <nav class="_menu" role="navigation">
       <h1 class="_menu-title"><a href="/" class="_menu-title-link">DevDocs</a></h1>
@@ -41,10 +42,10 @@
   <form class="_settings" id="settings">
     <div class="_header">
       <button type="button" aria-label="Back" class="_settings-btn _settings-btn-back" data-back>
-        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg> Back
+        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg> Back
       </button>
       <button type="submit" class="_settings-btn _settings-btn-save">
-        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg> Apply
+        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> Apply
       </button>
       <nav class="_settings-tabs">
         <button type="button" class="_settings-tab active" data-tab="doc-picker" hidden>Docs</button><button type="button" class="_settings-tab" data-tab="settings" hidden>Settings</button>
@@ -53,8 +54,14 @@
     <div class="_sidebar" tabindex="-1"></div>
   </form>
 </div>
-<svg style="display:none">
-  <symbol id="dir-icon"><svg viewBox="0 0 20 20"><path d="M15 10c0 .3-.305.515-.305.515l-8.56 5.303c-.625.41-1.135.106-1.135-.67V4.853c0-.777.51-1.078 1.135-.67l8.56 5.305S15 9.702 15 10z"/></svg></symbol>
+<svg style="display:none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <symbol id="icon-search" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></symbol>
+    <symbol id="icon-dir" viewBox="0 0 20 20"><path d="M15 10c0 .3-.305.515-.305.515l-8.56 5.303c-.625.41-1.135.106-1.135-.67V4.853c0-.777.51-1.078 1.135-.67l8.56 5.305S15 9.702 15 10z"/></symbol>
+    <symbol id="icon-close" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></symbol>
+    <symbol id="icon-copy" viewBox="0 0 14 16"><path d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"/></symbol>
+    <symbol id="icon-external-link" viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></symbol>
+  </defs>
 </svg>
 <style data-size="<%= app_size %>" data-resizer>
   ._container { margin-left: <%= app_size %>; }