<template>
    <template v-if="name">
        <svg v-if="svg" class="x-icon" aria-hidden="true">
            <use :href="symbolId" :fill="color" />
        </svg>
        <i v-else-if="isRemix" class="x-icon" :class="'x-icon-' + name" v-bind="{ ...$props, ...$attrs }"></i>
        <el-icon v-else class="x-icon">
            <component :is="icons[name]" />
        </el-icon>
    </template>
</template>
<script>
    import * as icons from '@element-plus/icons';
    export default defineComponent({
        name: 'XIcon',
        props: {
            name: {
                type: String,
                default: '',
            },
            size: {
                type: [String, Number],
                default: 14,
            },
            svg: {
                type: Boolean,
                default: false,
            },
            color: {
                type: String,
                default: 'inherit',
            },
        },
        setup(props) {
            const symbolId = computed(() => `#icon-${props.name}`);
            const size = computed(() =>
                Number.isNaN(new Number(props.size).valueOf()) ? props.size : props.size + 'px'
            );
            const isRemix = computed(() => !Object.keys(icons).includes(props.name));
            return {
                symbolId,
                size,
                color: props.color,
                isRemix,
                icons,
            };
        },
    });
</script>

<style lang="less" scoped>
    .x-icon {
        font-size: v-bind(size);
        color: v-bind(color);
        line-height: 1;
        vertical-align: middle;
    }
    svg.x-icon {
        width: v-bind(size);
        height: v-bind(size);
    }
</style>
