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'; 14import IconMisuse from '@carbon/icons-vue/es/misuse/20'; 15 16export default { 17 name: 'StatusIcon', 18 components: { 19 iconSuccess: IconCheckmark, 20 iconDanger: IconMisuse, 21 iconSecondary: IconError, 22 iconWarning: IconWarning 23 }, 24 props: { 25 status: { 26 type: String, 27 default: '' 28 } 29 } 30}; 31</script> 32 33<style lang="scss" scoped> 34.status-icon { 35 vertical-align: text-bottom; 36 &.success { 37 fill: theme-color('success'); 38 } 39 &.danger { 40 fill: theme-color('danger'); 41 } 42 &.secondary { 43 fill: gray('600'); 44 45 svg { 46 transform: rotate(-45deg); 47 } 48 } 49 &.warning { 50 fill: theme-color('warning'); 51 } 52} 53</style> 54