You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.7 KiB
60 lines
1.7 KiB
<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>
|