Fixing Icons

2 files changed, 62 insertions, 7 deletions

diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index ec88119e16c..2a018f38366 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -1,5 +1,5 @@
 <script>
-  import { statusIconEntityMap } from '../ci_status_icons';
+  import icon from '../../vue_shared/components/icon.vue';
 
   /**
    * Renders CI icon based on API response shared between all places where it is used.
@@ -30,11 +30,11 @@
       },
     },
 
-    computed: {
-      statusIconSvg() {
-        return statusIconEntityMap[this.status.icon];
-      },
+    components: {
+      icon,
+    },
 
+    computed: {
       cssClass() {
         const status = this.status.group;
         return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
@@ -44,7 +44,8 @@
 </script>
 <template>
   <span
-    :class="cssClass"
-    v-html="statusIconSvg">
+    :class="cssClass">
+    <icon
+      :name="status.icon"/>
   </span>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
new file mode 100644
index 00000000000..53e30829b2f
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -0,0 +1,54 @@
+<script>
+
+/* This is a re-usable vue component for rendering a svg sprite
+   icon
+
+  Sample configuration:
+
+  <icon
+    :img-src="userAvatarSrc"
+    :img-alt="tooltipText"
+    :tooltip-text="tooltipText"
+    tooltip-placement="top"
+  />
+
+*/
+
+  export default {
+    props: {
+      name: {
+        type: String,
+        required: true,
+      },
+
+      size: {
+        type: Number,
+        required: false,
+        default: 0,
+      },
+
+      cssClass: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+
+    computed: {
+      spriteHref() {
+        return `${gon.sprite_icons}#${this.name}`
+      },
+      fullCssClass() {
+        let classString = '' || this.cssClass;
+        // if (this.size) classString += `s${this.size}`
+        return classString;
+      },
+    },
+  };
+</script>
+<template>
+  <svg
+    :class="fullCssClass">
+    <use v-bind="{'xlink:href':spriteHref}"/>
+  </svg>
+</template>