<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>
        <ElIcon v-else class="x-icon">
            <component :is="icons[name]" />
        </ElIcon>
    </template>
</template>
<script setup>
    import * as icons from '@element-plus/icons';
    import { ElIcon } from 'element-plus/es/components/icon/index';
    const props = defineProps({
        // 图标名称
        name: {
            type: String,
            default: '',
        },
        // 图标尺寸
        size: {
            type: [String, Number],
            default: 14,
        },
        // 是否为自定义SVG图标
        svg: {
            type: Boolean,
            default: false,
        },
        // 图标颜色
        color: {
            type: String,
            default: 'inherit',
        },
    });
    // 自定义SVG唯一标识
    const symbolId = computed(() => `#icon-${props.name}`);
    // 补全图标尺寸
    const size = computed(() => (Number.isNaN(new Number(props.size).valueOf()) ? props.size : props.size + 'px'));
    // 判断是remix图标还是element-plus图标
    const isRemix = computed(() => !Object.keys(icons).includes(props.name));
</script>

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