1 files changed, 58 insertions, 0 deletions
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..4216660da8c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -0,0 +1,58 @@
+<script>
+
+/* This is a re-usable vue component for rendering a svg sprite
+   icon
+
+  Sample configuration:
+
+  <icon
+    name="retry"
+    :size="32"
+    css-classes="top"
+  />
+
+*/
+  // only allow classes in images.scss e.g. s12
+  const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
+
+  export default {
+    props: {
+      name: {
+        type: String,
+        required: true,
+      },
+
+      size: {
+        type: Number,
+        required: false,
+        default: 16,
+        validator(value) {
+          return validSizes.includes(value);
+        },
+      },
+
+      cssClasses: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+
+    computed: {
+      spriteHref() {
+        return `${gon.sprite_icons}#${this.name}`;
+      },
+      iconSizeClass() {
+        return this.size ? `s${this.size}` : '';
+      },
+    },
+  };
+</script>
+
+<template>
+  <svg
+    :class="[iconSizeClass, cssClasses]">
+    <use
+      v-bind="{'xlink:href':spriteHref}"/>
+  </svg>
+</template>