Fix repolist icons (#12228)

Fixes: #12226

Author: silverwind

templates/user/dashboard/repolist.tmpl

@@ -61,15 +61,15 @@
 								<a @click="togglePrivateFilter()">
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_both_private_public"}}" v-if="privateFilter === 'both'">
 										<input type="checkbox">
-										<label><svg class="svg octicon-lock" width="16" height="16" aria-hidden="true"><use xlink:href="#octicon-lock" /></svg>{{.i18n.Tr "home.show_private"}}</label>
+										<label>{{svg "octicon-lock" 16}}{{.i18n.Tr "home.show_private"}}</label>
 									</div>
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_only_public"}}" v-if="privateFilter === 'public'">
 										<input type="checkbox">
-										<label><svg class="svg octicon-lock" width="16" height="16" aria-hidden="true"><use xlink:href="#octicon-lock" /></svg>{{.i18n.Tr "home.show_private"}}</label>
+										<label>{{svg "octicon-lock" 16}}</svg>{{.i18n.Tr "home.show_private"}}</label>
 									</div>
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_only_private"}}" v-if="privateFilter === 'private'">
 										<input type="checkbox">
-										<label><svg class="svg octicon-lock" width="16" height="16" aria-hidden="true"><use xlink:href="#octicon-lock" /></svg>{{.i18n.Tr "home.show_private"}}</label>
+										<label>{{svg "octicon-lock" 16}}</svg>{{.i18n.Tr "home.show_private"}}</label>
 									</div>
 								</a>
 							</div>
@@ -103,7 +103,7 @@
 				<ul class="repo-owner-name-list">
 					<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
 						<a :href="suburl + '/' + repo.full_name">
-							<svg :class="'svg ' + repoClass(repo)" width="16" height="16" aria-hidden="true"><use :xlink:href="'#' + repoClass(repo)" /></svg>
+							<component v-bind:is="repoIcon(repo)" size="16"></component>
 							<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">

web_src/js/index.js

@@ -19,6 +19,7 @@ import initTableSort from './features/tablesort.js';
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
 import {initNotificationsTable, initNotificationCount} from './features/notification.js';
 import {createCodeEditor} from './features/codeeditor.js';
+import {svgs} from './svg.js';
 
 const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
 
@@ -2625,6 +2626,15 @@ function linkEmailAction(e) {
 }
 
 function initVueComponents() {
+  // register svg icon vue components, e.g. <octicon-repo size="16"/>
+  for (const [name, htmlString] of Object.entries(svgs)) {
+    const template = htmlString
+      .replace(/height="[0-9]+"/, 'v-bind:height="size"')
+      .replace(/width="[0-9]+"/, 'v-bind:width="size"');
+
+    Vue.component(name, {props: ['size'], template});
+  }
+
   const vueDelimeters = ['${', '}'];
 
   Vue.component('repo-search', {
@@ -2950,7 +2960,7 @@ function initVueComponents() {
         });
       },
 
-      repoClass(repo) {
+      repoIcon(repo) {
         if (repo.fork) {
           return 'octicon-repo-forked';
         } else if (repo.mirror) {

web_src/js/svg.js

@@ -1,15 +1,29 @@
 import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg';
 import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg';
+import octiconInternalRepo from '../../public/img/svg/octicon-internal-repo.svg';
 import octiconIssueClosed from '../../public/img/svg/octicon-issue-closed.svg';
 import octiconIssueOpened from '../../public/img/svg/octicon-issue-opened.svg';
 import octiconLink from '../../public/img/svg/octicon-link.svg';
+import octiconLock from '../../public/img/svg/octicon-lock.svg';
+import octiconRepo from '../../public/img/svg/octicon-repo.svg';
+import octiconRepoClone from '../../public/img/svg/octicon-repo-clone.svg';
+import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
+import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg';
+import octiconRepoTemplatePrivate from '../../public/img/svg/octicon-repo-template-private.svg';
 
-const svgs = {
+export const svgs = {
   'octicon-git-merge': octiconGitMerge,
   'octicon-git-pull-request': octiconGitPullRequest,
+  'octicon-internal-repo': octiconInternalRepo,
   'octicon-issue-closed': octiconIssueClosed,
   'octicon-issue-opened': octiconIssueOpened,
   'octicon-link': octiconLink,
+  'octicon-lock': octiconLock,
+  'octicon-repo': octiconRepo,
+  'octicon-repo-clone': octiconRepoClone,
+  'octicon-repo-forked': octiconRepoForked,
+  'octicon-repo-template': octiconRepoTemplate,
+  'octicon-repo-template-private': octiconRepoTemplatePrivate,
 };
 
 const parser = new DOMParser();