willaengine/resources/js/Global/components/Blocks/Icon.vue

<template>
    <div :class="`we-icon ${theme}`">
        <div class="icon"> <v-icon>  WMi-{{icon}} </v-icon> </div>
        <div class="label Fa">
            <div v-if="label" v-html="label"></div>
            <div class="value Fa" v-html="value"></div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        theme:           { default: 'theme-red' },
        label:          String,
        value:          { default: " مقدار " },
        icon:      { default: 'ok' },
    },
};
</script>
<style lang="scss" scoped>

    /*---------------------------------------------------------------*/
    /*                    Qunatity :: Begin*/
    /*---------------------------------------------------------------*/
    .we-icon {
        transition: 0.2s;
        border: 1px solid transparent;
        border-radius: 5px;
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .we-icon .icon .v-icon {
        font-size: 40px;
        margin-left: -5px;
        line-height: 45px;
    }
    .we-icon .label {
        font-size: 12px;
        text-align: right;
        line-height: 16px;
        margin-right: 3px;
        margin-bottom: 2px;
        opacity: 0.7;
    }
    .we-icon .value {
        font-size: 16px;
    }

    /*----------------------------------------------------*/
    /*                Sizes                               */
    /*----------------------------------------------------*/
    .we-icon.sm .v-icon {
        font-size: 30px;
        line-height: 20px;
    }
    .we-icon.sm .value {
        font-size: 14px;
        line-height: 16px;
    }
    .we-icon.sm .label {
        font-size: 10px;
        line-height: 12px;
    }

    .we-icon.sm .label {
        font-size: 12px;
        text-align: right;
        line-height: 14px;
        margin-right: 3px;
    }
    .we-icon.xl .v-icon {
        font-size: 60px;
        line-height: 50px;
    }

    .we-icon.xl .label {
        font-size: 15px;
        text-align: right;
        line-height: 18px;
        margin-right: 3px;
        margin-top: 4px;
    }


    .we-icon.variation {
        padding: 5px 10px;
        background-color: #eeeeee;
        border-radius: 3px;
        color: var(--color-store-order);
    }


    /*---------------------------------------------------------------*/
    /*                    Qunatity :: End*/
    /*---------------------------------------------------------------*/

    @import "resources/js/Global/scss/_vars.scss";
    @each $color,
    $value in $colors {
        .we-icon.theme-#{$color} .v-icon {
            color: $value;
        }
        .we-icon.theme-#{$color} .value {
            color: $value;
        }
    }
</style>