parent
3503481037
commit
14a1d213d3
@ -0,0 +1,58 @@
|
||||
<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>
|
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
1
|
||||
<component :is="ElSelect" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { ElSelect } from 'element-plus/es/components/select/index';
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
@ -1,71 +0,0 @@
|
||||
<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图标
|
||||
svg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 图标颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: 'inherit',
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
// 自定义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));
|
||||
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;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
svg.x-icon {
|
||||
width: v-bind(size);
|
||||
height: v-bind(size);
|
||||
}
|
||||
</style>
|
Loading…
Reference in new issue