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