<template>
    <div class="icon-wrapper" :style="getStyle" v-on="$listeners">
        <svg class="icon" aria-hidden="true">
            <use :xlink:href="iconName"></use>
        </svg>
    </div>
</template>

<script>

    export default {
        name: 'ElSvg',
        props: {
            name: {
                type: String,
                required: true
            },
            color: String,
            size: [String, Number],
            prefix: {
                type: String,
                default: 'icon-'
            }
        },
        computed: {
            iconName(){
                return `#${this.prefix}${this.name}`
            },
            getStyle() {
                let size = Number(this.size) ? `${this.size}px` : this.size
                return {
                    width: size,
                    height: size,
                    color: this.color
                }
            }
        }
    }
</script>

<style scoped>

</style>
