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  &.info {
40    fill: theme-color('info');
41  }
42  &.success {
43    fill: theme-color('success');
44  }
45  &.danger {
46    fill: theme-color('danger');
47  }
48  &.secondary {
49    fill: gray('600');
50
51    svg {
52      transform: rotate(-45deg);
53    }
54  }
55  &.warning {
56    fill: theme-color('warning');
57  }
58}
59</style>
60