<template>
        <router-link :to="Route" href="javascript:;" class="WM-Link WM-Align-C WM-PageNav" style="padding-top:16px;" :class="aClass">
            <i :class="[Icon ,IconSize]"></i>
            <span class="WM-Notification WM-Float-L" v-if="Quantity>0" :class="spanClass"> {{ Quantity }} </span>
        </router-link>
</template>

<script>
export default {
    props: {
        Icon:         { default: "دسترسی سریع" },
        ThemeColor:   { default: "Red" },
        Quantity:     { default: "" },
        IconSize:     { default: "WM-Font-20" },
        Route:        { default: "#" },
    },
    data: function ()  {
        return {
            aClass: 'WM-Link-' + this.ThemeColor,
            spanClass: 'WM-BG-' + this.ThemeColor,
        }
    },
};
</script>
