<template>
    <template v-if="name">
        <ElIcon v-if="isElement" class="x-icon">
            <component :is="icons[name]" />
        </ElIcon>
        <i v-else-if="isRemix" class="x-icon" :class="'x-icon-' + name" v-bind="{ ...$props, ...$attrs }"></i>
        <component :is="svgs[name]" v-else class="x-icon" />
    </template>
</template>
<script setup>
    import { icons, remix, svgs } from '@/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',
        },
    });
    // 补全图标尺寸
    const size = computed(() => (Number.isNaN(new Number(props.size).valueOf()) ? props.size : props.size + 'px'));
    const color = computed(() => props.color);
    // 判断图标库
    const isElement = computed(() => !props.svg && Object.keys(icons).includes(props.name));
    const isRemix = computed(() => !props.svg && remix.includes(props.name));
</script>

<style lang="less" scoped>
    .x-icon {
        font-size: v-bind(size);
        color: v-bind(color);
        line-height: 1;
    }
    svg.x-icon {
        width: v-bind(size);
        height: v-bind(size);
        fill: v-bind(color);
        :deep(image) {
            width: 100%;
            height: 100%;
        }
    }
</style>
