avoid using vue runtime compiler

Author: wxiaoguang

web_src/js/components/DashboardRepoList.vue

@@ -73,7 +73,7 @@
           <li v-for="repo in repos" :class="{'private': repo.private || repo.internal}" :key="repo.id">
             <a class="repo-list-link gt-df gt-ac gt-sb" :href="repo.link">
               <div class="item-name gt-df gt-ac gt-f1 gt-mr-2">
-                <svg-icon :name="repoIcon(repo)" size="16" class-name="gt-mr-2"/>
+                <svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/>
                 <div class="text gt-bold truncate gt-ml-1">{{ repo.full_name }}</div>
                 <span v-if="repo.archived">
                   <svg-icon name="octicon-archive" :size="16" class-name="gt-ml-2"/>

web_src/js/svg.js

@@ -1,3 +1,4 @@
+import {h} from 'vue';
 import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
 import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg';
 import octiconClock from '../../public/img/svg/octicon-clock.svg';
@@ -90,7 +91,9 @@ const svgs = {
   'octicon-git-branch': octiconGitBranch,
 };
 
-// TODO: use a more general approach to access SVG icons. At the moment, developers must check, pick and fill the names manually, most of the SVG icons in assets couldn't be used directly.
+// TODO: use a more general approach to access SVG icons.
+//  At the moment, developers must check, pick and fill the names manually,
+//  most of the SVG icons in assets couldn't be used directly.
 
 const parser = new DOMParser();
 const serializer = new XMLSerializer();
@@ -116,12 +119,7 @@ export const SvgIcon = {
     size: {type: Number, default: 16},
     className: {type: String, default: ''},
   },
-
-  computed: {
-    svg() {
-      return svg(this.name, this.size, this.className);
-    },
+  render() {
+    return h('span', {innerHTML: svg(this.name, this.size, this.className)});
   },
-
-  template: `<span v-html="svg" />`
 };