Add SVG icon Vue component

Author: lafriks

web_src/js/components/ContextPopup.vue

@@ -3,7 +3,7 @@
     <div v-if="loading" class="ui active centered inline loader"/>
     <div v-if="!loading && issue !== null">
       <p><small>{{ issue.repository.full_name }} on {{ createdAt }}</small></p>
-      <p><span :class="color" v-html="icon" /> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p>
+      <p><svg-icon :name="icon" :class="[color]" /> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p>
       <p>{{ body }}</p>
       <div>
         <div
@@ -20,12 +20,17 @@
 </template>
 
 <script>
-import {svg} from '../svg.js';
+import {SvgIcon} from '../svg.js';
+
 const {AppSubUrl} = window.config;
 
 export default {
   name: 'ContextPopup',
 
+  components: {
+    SvgIcon,
+  },
+
   data: () => ({
     loading: false,
     issue: null
@@ -49,15 +54,15 @@ export default {
     icon() {
       if (this.issue.pull_request !== null) {
         if (this.issue.state === 'open') {
-          return svg('octicon-git-pull-request'); // Open PR
+          return 'octicon-git-pull-request'; // Open PR
         } else if (this.issue.pull_request.merged === true) {
-          return svg('octicon-git-merge'); // Merged PR
+          return 'octicon-git-merge'; // Merged PR
         }
-        return svg('octicon-git-pull-request'); // Closed PR
+        return 'octicon-git-pull-request'; // Closed PR
       } else if (this.issue.state === 'open') {
-        return svg('octicon-issue-opened'); // Open Issue
+        return 'octicon-issue-opened'; // Open Issue
       }
-      return svg('octicon-issue-closed'); // Closed Issue
+      return 'octicon-issue-closed'; // Closed Issue
     },
 
     color() {

web_src/js/svg.js

@@ -14,6 +14,8 @@ import octiconRepo from '../../public/img/svg/octicon-repo.svg';
 import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
 import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg';
 
+import Vue from 'vue';
+
 export const svgs = {
   'octicon-chevron-down': octiconChevronDown,
   'octicon-chevron-right': octiconChevronRight,
@@ -47,3 +49,19 @@ export function svg(name, size = 16, className = '') {
   if (className) svgNode.classList.add(...className.split(/\s+/));
   return serializer.serializeToString(svgNode);
 }
+
+export const SvgIcon = Vue.component('SvgIcon', {
+  props: {
+    name: {type: String, required: true},
+    size: {type: Number, default: 16},
+    className: {type: String, default: ''},
+  },
+
+  computed: {
+    svg() {
+      return svg(this.name, this.size, this.className);
+    },
+  },
+
+  template: `<span v-html="svg" />`
+});