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