2 files changed, 26 insertions, 2 deletions
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 8064e59507..de3522983a 100644
--- a/web_src/js/index.js
+++ b/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) {
diff --git a/web_src/js/svg.js b/web_src/js/svg.js
index 5e66a4dd1a..9a7c7f4e67 100644
--- a/web_src/js/svg.js
+++ b/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();