<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: {
                type: String,
                default() {
                    return this.$ELEMENT.svg?.color
                }
            },
            size: {
                type: [String, Number],
                default() {
                    return this.$ELEMENT.svg?.size || 16
                }
            },
            prefix: {
                type: String,
                default() {
                    return this.$ELEMENT.svg?.prefix || '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>
