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>

5 files changed, 31 insertions, 31 deletions

diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl
index 27a0a76bc4..7ebe28195a 100644
--- a/templates/user/dashboard/dashboard.tmpl
+++ b/templates/user/dashboard/dashboard.tmpl
@@ -85,11 +85,11 @@
 								<ul class="repo-owner-name-list">
 									<li v-for="repo in repos" :class="{'private': repo.private}" v-show="showRepo(repo, reposFilter)">
 										<a :href="suburl + '/' + repo.full_name">
-											<i :class="repoClass(repo)"></i>
+											<svg :class="'svg ' + repoClass(repo)" width="16" height="16" aria-hidden="true"><use :xlink:href="staticPrefix + '/img/svg/icons.svg#' + repoClass(repo)" /></svg>
 											<strong class="text truncate item-name">${repo.full_name}</strong>
 											<i v-if="repo.archived" class="archive icon archived-icon"></i>
 											<span class="ui right text light grey">
-												${repo.stars_count} <i class="octicon octicon-star rear"></i>
+												${repo.stars_count} <span class="rear">{{svg "octicon-star" 16}}</span>
 											</span>
 										</a>
 									</li>
@@ -113,10 +113,10 @@
 								<ul class="repo-owner-name-list">
 									<li v-for="org in organizations">
 										<a :href="suburl + '/' + org.name">
-											<i class="octicon octicon-organization"></i>
+											{{svg "octicon-organization" 16}}
 											<strong class="text truncate item-name">${org.name}</strong>
 											<span class="ui right text light grey">
-												${org.num_repos} <i class="octicon octicon-repo rear"></i>
+												${org.num_repos} <span class="rear">{{svg "octicon-repo" 16}}</span>
 											</span>
 										</a>
 									</li>
diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
index 7c4b1da0c7..fe92cad559 100644
--- a/templates/user/dashboard/feeds.tmpl
+++ b/templates/user/dashboard/feeds.tmpl
@@ -101,7 +101,7 @@
 				</div>
 			</div>
 			<div class="ui two wide right aligned column">
-				<i class="text grey mega-octicon octicon-{{ActionIcon .GetOpType}}"></i>
+				<span class="text grey">{{svg (printf "octicon-%s" (ActionIcon .GetOpType)) 32}}</span>
 			</div>
 		</div>
 		<div class="ui divider"></div>
diff --git a/templates/user/dashboard/issues.tmpl b/templates/user/dashboard/issues.tmpl
index c8cc8b09df..dfb94560e5 100644
--- a/templates/user/dashboard/issues.tmpl
+++ b/templates/user/dashboard/issues.tmpl
@@ -54,11 +54,11 @@
 			<div class="twelve wide column content">
 				<div class="ui tiny basic status buttons">
 					<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open">
-						<i class="octicon octicon-issue-opened"></i>
+						{{svg "octicon-issue-opened" 16}}
 						{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
 					</a>
 					<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed">
-						<i class="octicon octicon-issue-closed"></i>
+						{{svg "octicon-issue-closed" 16}}
 						{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
 					</a>
 				</div>
@@ -110,10 +110,10 @@
 							{{end}}
 
 							{{if .NumComments}}
-								<span class="comment ui right"><i class="octicon octicon-comment"></i> {{.NumComments}}</span>
+								<span class="comment ui right">{{svg "octicon-comment" 16}} {{.NumComments}}</span>
 							{{end}}
 							{{if .TotalTrackedTime}}
-								<span class="comment ui right"><i class="octicon octicon-clock"></i> {{.TotalTrackedTime | Sec2Time}}</span>
+								<span class="comment ui right">{{svg "octicon-clock" 16}} {{.TotalTrackedTime | Sec2Time}}</span>
 							{{end}}
 
 							<p class="desc">
@@ -126,12 +126,12 @@
 								{{end}}
 								{{if .Milestone}}
 									<a class="milestone" href="{{AppSubUrl}}/{{.Repo.Owner.Name}}/{{.Repo.Name}}{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{.Milestone.ID}}&assignee={{$.AssigneeID}}">
-										<span class="octicon octicon-milestone"></span> {{.Milestone.Name}}
+										{{svg "octicon-milestone" 16}} {{.Milestone.Name}}
 									</a>
 								{{end}}
 								{{if .Ref}}
 									<a class="ref" href="{{AppSubUrl}}/{{.Repo.Owner.Name}}/{{.Repo.Name}}/src/branch/{{.Ref}}">
-										<span class="octicon octicon-git-branch"></span> {{.Ref}}
+										{{svg "octicon-git-branch" 16}} {{.Ref}}
 									</a>
 								{{end}}
 								{{range .Assignees}}
@@ -143,17 +143,17 @@
 								{{if gt $tasks 0}}
 									{{$tasksDone := .GetTasksDone}}
 									<span class="checklist">
-										<span class="octicon octicon-checklist"></span> {{$tasksDone}} / {{$tasks}} <span class="progress-bar"><span class="progress" style="width:calc(100% * {{$tasksDone}} / {{$tasks}});"></span></span>
+										{{svg "octicon-checklist" 16}} {{$tasksDone}} / {{$tasks}} <span class="progress-bar"><span class="progress" style="width:calc(100% * {{$tasksDone}} / {{$tasks}});"></span></span>
 									</span>
 								{{end}}
 								{{if ne .DeadlineUnix 0}}
 									<span class="due-date poping up" data-content="{{$.i18n.Tr "repo.issues.due_date"}}" data-variation="tiny inverted" data-position="right center">
-										<span class="octicon octicon-calendar"></span><span{{if .IsOverdue}} class="overdue"{{end}}>{{.DeadlineUnix.FormatShort}}</span>
+										{{svg "octicon-calendar" 16}}<span{{if .IsOverdue}} class="overdue"{{end}}>{{.DeadlineUnix.FormatShort}}</span>
 									</span>
 								{{end}}
 								{{if .IsPull}}
 									{{if and (not .PullRequest.HasMerged) ((len .PullRequest.ConflictedFiles) gt 0)}}
-										<span class="conflicting"><i class="octicon octicon-mirror"></i> {{$.i18n.Tr (TrN $.i18n.Lang (len .PullRequest.ConflictedFiles) "repo.pulls.num_conflicting_files_1" "repo.pulls.num_conflicting_files_n") (len .PullRequest.ConflictedFiles)}}</span>
+										<span class="conflicting">{{svg "octicon-mirror" 16}} {{$.i18n.Tr (TrN $.i18n.Lang (len .PullRequest.ConflictedFiles) "repo.pulls.num_conflicting_files_1" "repo.pulls.num_conflicting_files_n") (len .PullRequest.ConflictedFiles)}}</span>
 									{{end}}
 								{{end}}
 							</p>
diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
index 98b99c6430..2a4226e923 100644
--- a/templates/user/dashboard/milestones.tmpl
+++ b/templates/user/dashboard/milestones.tmpl
@@ -36,11 +36,11 @@
 			<div class="twelve wide column content">
 				<div class="ui tiny basic status buttons">
 					<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open">
-						<i class="octicon octicon-issue-opened"></i>
+						{{svg "octicon-issue-opened" 16}}
 						{{.i18n.Tr "repo.milestones.open_tab" .MilestoneStats.OpenCount}}
 					</a>
 					<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed">
-						<i class="octicon octicon-issue-closed"></i>
+						{{svg "octicon-issue-closed" 16}}
 						{{.i18n.Tr "repo.milestones.close_tab" .MilestoneStats.ClosedCount}}
 					</a>
 				</div>
@@ -66,7 +66,7 @@
                     {{range .Milestones}}
                         <li class="item">
                             <div class="ui label">{{.Repo.FullName}}</div>
-                            <i class="octicon octicon-milestone"></i> <a href="{{.Repo.Link }}/milestone/{{.ID}}">{{.Name}}</a>
+							{{svg "octicon-milestone" 16}} <a href="{{.Repo.Link }}/milestone/{{.ID}}">{{.Name}}</a>
                             <div class="ui right green progress" data-percent="{{.Completeness}}">
                                 <div class="bar" {{if not .Completeness}}style="background-color: transparent"{{end}}>
                                     <div class="progress"></div>
@@ -75,9 +75,9 @@
                             <div class="meta">
                                 {{ $closedDate:= TimeSinceUnix .ClosedDateUnix $.Lang }}
                                 {{if .IsClosed}}
-                                    <span class="octicon octicon-clock"></span> {{$.i18n.Tr "repo.milestones.closed" $closedDate|Str2html}}
+									{{svg "octicon-clock" 16}} {{$.i18n.Tr "repo.milestones.closed" $closedDate|Str2html}}
                                 {{else}}
-                                    <span class="octicon octicon-calendar"></span>
+									{{svg "octicon-calendar" 16}}
                                     {{if .DeadlineString}}
                                         <span {{if .IsOverdue}}class="overdue"{{end}}>{{.DeadlineString}}</span>
                                     {{else}}
@@ -85,20 +85,20 @@
                                     {{end}}
                                 {{end}}
                                 <span class="issue-stats">
-                                    <i class="octicon octicon-issue-opened"></i> {{$.i18n.Tr "repo.milestones.open_tab" .NumOpenIssues}}
-                                    <i class="octicon octicon-issue-closed"></i> {{$.i18n.Tr "repo.milestones.close_tab" .NumClosedIssues}}
-                                    {{if .TotalTrackedTime}}<i class="octicon octicon-clock"></i> {{.TotalTrackedTime|Sec2Time}}{{end}}
+                                    {{svg "octicon-issue-opened" 16}} {{$.i18n.Tr "repo.milestones.open_tab" .NumOpenIssues}}
+									{{svg "octicon-issue-closed" 16}} {{$.i18n.Tr "repo.milestones.close_tab" .NumClosedIssues}}
+                                    {{if .TotalTrackedTime}}{{svg "octicon-clock" 16}} {{.TotalTrackedTime|Sec2Time}}{{end}}
                                 </span>
                             </div>
                             {{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
                                 <div class="ui right operate">
-                                    <a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Name}}><i class="octicon octicon-pencil"></i> {{$.i18n.Tr "repo.issues.label_edit"}}</a>
+                                    <a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-pencil" 16}} {{$.i18n.Tr "repo.issues.label_edit"}}</a>
                                     {{if .IsClosed}}
-                                        <a href="{{$.Link}}/{{.ID}}/open" data-id={{.ID}} data-title={{.Name}}><i class="octicon octicon-check"></i> {{$.i18n.Tr "repo.milestones.open"}}</a>
+                                        <a href="{{$.Link}}/{{.ID}}/open" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-check" 16}} {{$.i18n.Tr "repo.milestones.open"}}</a>
                                     {{else}}
-                                        <a href="{{$.Link}}/{{.ID}}/close" data-id={{.ID}} data-title={{.Name}}><i class="octicon octicon-x"></i> {{$.i18n.Tr "repo.milestones.close"}}</a>
+                                        <a href="{{$.Link}}/{{.ID}}/close" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-x" 16}} {{$.i18n.Tr "repo.milestones.close"}}</a>
                                     {{end}}
-                                    <a class="delete-button" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}"><i class="octicon octicon-trashcan"></i> {{$.i18n.Tr "repo.issues.label_delete"}}</a>
+                                    <a class="delete-button" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}">{{svg "octicon-trashcan" 16}} {{$.i18n.Tr "repo.issues.label_delete"}}</a>
                                 </div>
                             {{end}}
                             {{if .Content}}
diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl
index 1ebd20c8b2..7afb975bbc 100644
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@@ -25,7 +25,7 @@
 					</div>
 					{{if .SignedUser.CanCreateOrganization}}
 					<a class="item" href="{{AppSubUrl}}/org/create">
-						<i class="octicon octicon-plus"></i>&nbsp;&nbsp;&nbsp;{{.i18n.Tr "new_org"}}
+						{{svg "octicon-plus" 16}}&nbsp;&nbsp;&nbsp;{{.i18n.Tr "new_org"}}
 					</a>
 					{{end}}
 				</div>
@@ -35,17 +35,17 @@
 		{{if .ContextUser.IsOrganization}}
 			<div class="right stackable menu">
 				<a class="{{if .PageIsNews}}active{{end}} item" style="margin-left: auto" href="{{AppSubUrl}}/org/{{.ContextUser.Name}}/dashboard">
-					<i class="octicon octicon-rss"></i>&nbsp;{{.i18n.Tr "activities"}}
+					{{svg "octicon-rss" 16}}&nbsp;{{.i18n.Tr "activities"}}
 				</a>
 				<a class="{{if .PageIsIssues}}active{{end}} item" href="{{AppSubUrl}}/org/{{.ContextUser.Name}}/issues">
-					<i class="octicon octicon-issue-opened"></i>&nbsp;{{.i18n.Tr "issues"}}
+					{{svg "octicon-issue-opened" 16}}&nbsp;{{.i18n.Tr "issues"}}
 				</a>
 				<a class="{{if .PageIsPulls}}active{{end}} item" href="{{AppSubUrl}}/org/{{.ContextUser.Name}}/pulls">
-					<i class="octicon octicon-git-pull-request"></i>&nbsp;{{.i18n.Tr "pull_requests"}}
+					{{svg "octicon-git-pull-request" 16}}&nbsp;{{.i18n.Tr "pull_requests"}}
 				</a>
 				{{if .ShowMilestonesDashboardPage}}
 					<a class="{{if .PageIsMilestonesDashboard}}active{{end}} item" href="{{AppSubUrl}}/org/{{.ContextUser.Name}}/milestones">
-						<i class="octicon octicon-milestone"></i>&nbsp;{{.i18n.Tr "milestones"}}
+						{{svg "octicon-milestone" 16}}&nbsp;{{.i18n.Tr "milestones"}}
 					</a>
 				{{end}}
 				<div class="item">