Add Octicon SVG spritemap (#10107)

* Add octicon SVG sprite

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Static prefix

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* SVG for all repo icons

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* make vendor

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Swap out octicons

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Move octicons to top of less imports

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix JS

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Definitely not a search/replace

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Missed regex

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Move to more generic calls and webpack

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* make svg -> make webpack

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Remove svg-sprite

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Update tests

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Missed a test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Remove svg from makefile

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Suggestions

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Attempt to fix test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Update tests

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Revert timetracking test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Swap .octicon for .svg in less

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Add aria-hidden

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Replace mega-octicon

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix webpack globbing on Windows

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Revert

Co-Authored-By: silverwind <me@silverwind.io>

* Fix octions from upstream

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix Vue and missed JS function

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Add JS helper and PWA

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Preload SVG

Signed-off-by: jolheiser <john.olheiser@gmail.com>

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <matti@mdranta.net>

10 files changed, 73 insertions, 57 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index c84a2c8991..5d195774dd 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -18,8 +18,13 @@ function htmlEncode(text) {
   return jQuery('<div />').text(text).html();
 }
 
+function svg(name, size) {
+  return `<svg class="svg ${name}" width="${size}" height="${size}" aria-hidden="true"><use xlink:href="${staticPrefix}/img/svg/icons.svg#${name}"/></svg>`;
+}
+
 let csrf;
 let suburl;
+let staticPrefix;
 let previewFileModes;
 let simpleMDEditor;
 const commentMDEditors = {};
@@ -377,10 +382,10 @@ function initCommentForm() {
         // adding/removing labels
         if ($(this).hasClass('checked')) {
           $(this).removeClass('checked');
-          $(this).find('.octicon').removeClass('octicon-check');
+          $(this).find('.octicon-check').addClass('invisible');
         } else {
           $(this).addClass('checked');
-          $(this).find('.octicon').addClass('octicon-check');
+          $(this).find('.octicon-check').removeClass('invisible');
         }
 
         updateIssuesMeta(
@@ -395,7 +400,7 @@ function initCommentForm() {
 
       if ($(this).hasClass('checked')) {
         $(this).removeClass('checked');
-        $(this).find('.octicon').removeClass('octicon-check');
+        $(this).find('.octicon-check').addClass('invisible');
         if (hasLabelUpdateAction) {
           if (!($(this).data('id') in labels)) {
             labels[$(this).data('id')] = {
@@ -409,7 +414,7 @@ function initCommentForm() {
         }
       } else {
         $(this).addClass('checked');
-        $(this).find('.octicon').addClass('octicon-check');
+        $(this).find('.octicon-check').removeClass('invisible');
         if (hasLabelUpdateAction) {
           if (!($(this).data('id') in labels)) {
             labels[$(this).data('id')] = {
@@ -452,7 +457,7 @@ function initCommentForm() {
 
       $(this).parent().find('.item').each(function () {
         $(this).removeClass('checked');
-        $(this).find('.octicon').removeClass('octicon-check');
+        $(this).find('.octicon').addClass('invisible');
       });
 
       $list.find('.item').each(function () {
@@ -2361,6 +2366,7 @@ function initTemplateSearch() {
 $(document).ready(async () => {
   csrf = $('meta[name=_csrf]').attr('content');
   suburl = $('meta[name=_suburl]').attr('content');
+  staticPrefix = $('meta[name=_staticprefix]').attr('content');
 
   // Show exact time
   $('.time-since').each(function () {
@@ -2497,7 +2503,7 @@ $(document).ready(async () => {
     $(this).find('h1, h2, h3, h4, h5, h6').each(function () {
       let node = $(this);
       node = node.wrap('<div class="anchor-wrap"></div>');
-      node.append(`<a class="anchor" href="#${encodeURIComponent(node.attr('id'))}"><span class="octicon octicon-link"></span></a>`);
+      node.append(`<a class="anchor" href="#${encodeURIComponent(node.attr('id'))}">${svg('octicon-link', 16)}</a>`);
     });
   });
 
@@ -2779,6 +2785,7 @@ function initVueComponents() {
         reposFilter: 'all',
         searchQuery: '',
         isLoading: false,
+        staticPrefix,
         repoTypes: {
           all: {
             count: 0,
@@ -2881,13 +2888,13 @@ function initVueComponents() {
 
       repoClass(repo) {
         if (repo.fork) {
-          return 'octicon octicon-repo-forked';
+          return 'octicon-repo-forked';
         } if (repo.mirror) {
-          return 'octicon octicon-repo-clone';
+          return 'octicon-repo-clone';
         } if (repo.private) {
-          return 'octicon octicon-lock';
+          return 'octicon-lock';
         }
-        return 'octicon octicon-repo';
+        return 'octicon-repo';
       }
     }
   });
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index d1851d5d88..9627ba7914 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -261,11 +261,11 @@ code,
         z-index: 900;
     }
 
-    .octicon {
-        &.fitted {
-            margin-right: 0;
-        }
+    .fitted .svg {
+        margin-right: 0;
+    }
 
+    .svg {
         margin-right: 0.75em;
     }
 
@@ -277,7 +277,7 @@ code,
         }
     }
 
-    .text .octicon {
+    .text .svg {
         width: 16px;
         text-align: center;
     }
@@ -597,7 +597,7 @@ code,
     }
 
     &.status.buttons {
-        .octicon {
+        .svg {
             margin-right: 4px;
         }
     }
@@ -1136,7 +1136,7 @@ i.icon.centerlock {
         overflow-y: visible;
     }
 
-    *:not(.fa):not(.octicon):not(.icon) {
+    *:not(.fa):not(.svg):not(.icon) {
         font-size: 12px;
         font-family: @monospaced-fonts, monospace;
         line-height: 20px;
@@ -1167,7 +1167,7 @@ i.icon.centerlock {
     height: 2.1666em !important;
 }
 
-.octicon {
+.svg {
     &.green {
         color: #21ba45;
     }
@@ -1192,3 +1192,7 @@ i.icon.centerlock {
     border: 1px solid #ccc;
     border-radius: 500em;
 }
+
+.invisible {
+    visibility: hidden;
+}
diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
index 71239ffc3e..ab0d3b61b9 100644
--- a/web_src/less/_dashboard.less
+++ b/web_src/less/_dashboard.less
@@ -155,7 +155,7 @@
                     padding: 6px 1.2em;
                     display: block;
 
-                    .octicon {
+                    .svg {
                         color: #888888;
 
                         &.rear {
diff --git a/web_src/less/_explore.less b/web_src/less/_explore.less
index ad9adc70e0..e9a2546896 100644
--- a/web_src/less/_explore.less
+++ b/web_src/less/_explore.less
@@ -9,7 +9,7 @@
         background-color: #fafafa !important;
         border-width: 1px !important;
 
-        .octicon {
+        .svg {
             width: 16px;
             text-align: center;
             margin-right: 5px;
@@ -95,7 +95,7 @@
         .description {
             margin-top: 5px;
 
-            .octicon:not(:first-child) {
+            .svg:not(:first-child) {
                 margin-left: 5px;
             }
 
diff --git a/web_src/less/_home.less b/web_src/less/_home.less
index 53fd76f098..90390239a1 100644
--- a/web_src/less/_home.less
+++ b/web_src/less/_home.less
@@ -24,10 +24,11 @@
             }
         }
 
-        .octicon {
+        .svg {
             color: #5aa509;
-            font-size: 40px;
+            height: 40px;
             width: 50px;
+            vertical-align: bottom;
         }
 
         &.header {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 7a84c7d636..bd2449ba1e 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1,5 +1,4 @@
 .repository {
-    @mega-octicon-width: 30px;
 
     padding-top: 15px;
 
@@ -12,34 +11,29 @@
             margin-top: 0;
         }
 
-        .mega-octicon {
-            width: @mega-octicon-width;
-            font-size: 30px;
-        }
-
         .ui.huge.breadcrumb {
             font-weight: 400;
             font-size: 1.5rem;
 
-            i.mega-octicon {
+            svg {
                 position: relative;
                 top: 5px;
             }
 
-            i.octicon-lock {
+            svg.octicon-lock {
                 margin-left: 5px;
             }
         }
 
         .fork-flag {
-            margin-left: @mega-octicon-width + 6px;
+            margin-left: 36px;
             margin-top: 3px;
             display: block;
             font-size: 12px;
             white-space: nowrap;
         }
 
-        .octicon.octicon-repo-forked {
+        .svg.octicon-repo-forked {
             margin-top: -1px;
             font-size: 15px;
         }
@@ -135,7 +129,7 @@
             border-bottom: 0;
         }
 
-        .ui.tabular .octicon {
+        .ui.tabular .svg {
             margin-right: 5px;
         }
     }
@@ -147,13 +141,13 @@
             padding: 0 8px;
         }
 
-        .octicon {
+        .svg {
             float: left;
             margin: 0 -7px 0 -5px;
             width: 16px;
         }
 
-        &.labels .octicon {
+        &.labels .svg {
             margin: -2px -7px 0 -5px;
         }
 
@@ -325,7 +319,7 @@
             }
 
             tbody {
-                .octicon {
+                .svg {
                     margin-left: 3px;
                     margin-right: 5px;
                     color: #777777;
@@ -456,7 +450,7 @@
         .sidebar {
             padding-left: 0;
 
-            .octicon {
+            .svg {
                 width: 16px;
             }
         }
@@ -476,7 +470,7 @@
         }
 
         .tabular.menu {
-            .octicon {
+            .svg {
                 margin-right: 5px;
             }
         }
@@ -637,7 +631,7 @@
             &.tabular.menu {
                 margin-bottom: 10px;
 
-                .octicon {
+                .svg {
                     margin-right: 5px;
                 }
             }
@@ -675,7 +669,7 @@
                     text-align: center;
                     vertical-align: middle;
 
-                    .octicon {
+                    .svg {
                         width: 23px;
                         font-size: 23px;
                         margin-top: 0.45em;
@@ -896,11 +890,11 @@
                 margin: 15px 0 15px 79px;
                 padding-left: 25px;
 
-                & > .octicon:not(.issue-symbol) {
+                & > .svg:not(.issue-symbol) {
                     text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
                 }
 
-                & > .octicon.issue-symbol {
+                & > .svg.issue-symbol {
                     font-size: 20px;
                     margin-left: -35px;
                     margin-right: -1px;
@@ -935,7 +929,7 @@
                     }
                 }
 
-                .octicon {
+                .svg {
                     width: 30px;
                     float: left;
                     text-align: center;
@@ -980,7 +974,7 @@
                     margin-top: 5px;
                     margin-left: 35px;
 
-                    .octicon {
+                    .svg {
                         &.octicon-git-commit {
                             margin-top: 2px;
                         }
@@ -1104,7 +1098,7 @@
                 color: #999999;
                 padding-top: 5px;
 
-                .issue-stats .octicon {
+                .issue-stats .svg {
                     padding-left: 5px;
                 }
 
@@ -1150,7 +1144,7 @@
         }
 
         .choose.branch {
-            .octicon {
+            .svg {
                 padding-right: 10px;
             }
         }
@@ -1617,7 +1611,7 @@
                         margin-top: 20px;
 
                         > a {
-                            .octicon {
+                            .svg {
                                 margin-left: 5px;
                                 margin-right: 5px;
                             }
@@ -1730,7 +1724,7 @@
                 padding-top: 70px;
                 padding-bottom: 100px;
 
-                .mega-octicon {
+                .svg {
                     font-size: 48px;
                 }
             }
@@ -2232,11 +2226,11 @@
                 margin: 15px -1rem -1rem -1rem;
             }
 
-            > .mega-octicon {
+            > .svg {
                 display: table-cell;
             }
 
-            > .mega-octicon + .content {
+            > .svg + .content {
                 display: table-cell;
                 padding: 0 0 0 0.5em;
                 vertical-align: top;
diff --git a/web_src/less/_svg.less b/web_src/less/_svg.less
new file mode 100644
index 0000000000..b17b9a8b32
--- /dev/null
+++ b/web_src/less/_svg.less
@@ -0,0 +1,9 @@
+.svg {
+    display: inline-block;
+    vertical-align: text-top;
+    fill: currentColor;
+
+    .middle & {
+        vertical-align: middle;
+    }
+}
diff --git a/web_src/less/_user.less b/web_src/less/_user.less
index 52c59464d8..2bec3489e7 100644
--- a/web_src/less/_user.less
+++ b/web_src/less/_user.less
@@ -24,7 +24,7 @@
                             border-bottom: 1px solid #eaeaea;
                         }
 
-                        .octicon,
+                        .svg,
                         .fa {
                             margin-left: 1px;
                             margin-right: 5px;
@@ -80,7 +80,7 @@
     }
 
     &.notification {
-        .octicon {
+        .svg {
             float: left;
             font-size: 2em;
 
diff --git a/web_src/less/index.less b/web_src/less/index.less
index 1b93024329..12eb8cf8e5 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -1,6 +1,7 @@
 @import "~highlight.js/styles/github.css";
 @import "./vendor/gitGraph.css";
 
+@import "_svg";
 @import "_tribute";
 @import "_emojify";
 @import "_base";
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index bd8033e302..0d2a1a4e98 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -654,11 +654,11 @@ a.ui.basic.green.label:hover {
     border-top: 1px solid #353944;
 }
 
-.repository.view.issue .comment-list .event > .octicon.issue-symbol {
+.repository.view.issue .comment-list .event > .svg.issue-symbol {
     background: #3b4954;
 }
 
-.repository.view.issue .comment-list .event > .octicon:not(.issue-symbol) {
+.repository.view.issue .comment-list .event > .svg:not(.issue-symbol) {
     text-shadow: -2px 0 #383c4a, 0 2px #383c4a, 2px 0 #383c4a, 0 -2px #383c4a;
 }
 
@@ -1065,8 +1065,8 @@ input {
     color: #668cb1;
 }
 
-.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory,
-.repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule {
+.repository.file.list #repo-files-table tbody .svg.octicon-file-directory,
+.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
     color: #7c9b5e;
 }