1 files changed, 29 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
new file mode 100644
index 00000000000..4d44baaa3c4
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -0,0 +1,29 @@
+<script>
+  import { statusIconEntityMap, statusCssClasses } from '../../vue_shared/ci_status_icons';
+
+  export default {
+    props: {
+      status: {
+        type: Object,
+        required: true,
+      },
+    },
+
+    computed: {
+      statusIconSvg() {
+        return statusIconEntityMap[this.status.icon];
+      },
+
+      cssClass() {
+        const status = statusCssClasses[this.status.icon];
+        return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
+      },
+    },
+  };
+</script>
+<template>
+  <span
+    :class="cssClass"
+    v-html="statusIconSvg">
+  </span>
+</template>