1<template>
2  <span :class="['status-icon', status]">
3    <icon-info v-if="status === 'info'" />
4    <icon-success v-else-if="status === 'success'" />
5    <icon-warning v-else-if="status === 'warning'" />
6    <icon-danger v-else-if="status === 'danger'" />
7    <icon-secondary v-else />
8  </span>
9</template>
10
11<script>
12import IconInfo from '@carbon/icons-vue/es/information--filled/20';
13import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20';
14import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
15import IconError from '@carbon/icons-vue/es/error--filled/20';
16import IconMisuse from '@carbon/icons-vue/es/misuse/20';
17
18export default {
19  name: 'StatusIcon',
20  components: {
21    IconInfo: IconInfo,
22    iconSuccess: IconCheckmark,
23    iconDanger: IconMisuse,
24    iconSecondary: IconError,
25    iconWarning: IconWarning
26  },
27  props: {
28    status: {
29      type: String,
30      default: ''
31    }
32  }
33};
34</script>
35
36<style lang="scss" scoped>
37.status-icon {
38  vertical-align: text-bottom;
39
40  &.info {
41    color: theme-color('info');
42  }
43  &.success {
44    color: theme-color('success');
45  }
46  &.danger {
47    color: theme-color('danger');
48  }
49  &.secondary {
50    color: gray('600');
51    transform: rotate(-45deg);
52  }
53  &.warning {
54    color: theme-color('warning');
55  }
56
57  svg {
58    fill: currentColor;
59  }
60}
61</style>
62