1<template>
2  <span :class="['status-icon', status]">
3    <icon-success v-if="status === 'success'" />
4    <icon-danger v-else-if="status === 'danger'" />
5    <icon-secondary v-else />
6  </span>
7</template>
8
9<script>
10import IconCheckmark from "@carbon/icons-vue/es/checkmark--filled/20";
11import IconWarning from "@carbon/icons-vue/es/warning--filled/20";
12import IconError from "@carbon/icons-vue/es/error--filled/20";
13
14export default {
15  name: "StatusIcon",
16  props: ["status"],
17  components: {
18    iconSuccess: IconCheckmark,
19    iconDanger: IconWarning,
20    iconSecondary: IconError
21  }
22};
23</script>
24
25<style lang="scss" scoped>
26.status-icon {
27  vertical-align: text-bottom;
28  &.success {
29    fill: $success;
30  }
31  &.danger {
32    fill: $danger;
33  }
34  &.secondary {
35    fill: $secondary;
36  }
37}
38</style>
39