<template>
    <div
        class="banner-icon d-flex justify-content-center"
        v-html="val"
        :class="{ selected: selected }"
    ></div>
</template>

<script lang="ts">
    import { Component, Vue, Prop } from "vue-property-decorator";

    @Component({ components: {} })
    export default class BannerIcon extends Vue {
        @Prop()
        private val!: string;

        @Prop()
        private selected!: boolean;
    }
</script>

<style lang="less" scoped>
    @import "~@/css/variables.less";

    /deep/ ._banner-icon {
        fill: #aaaaaa;
    }

    .selected /deep/ ._banner-icon {
        fill: #33cca6;
    }
</style>