2024-04-14 16:51:11 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<svg
|
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
|
:class="svgClass"
|
|
|
|
|
|
:style="{
|
|
|
|
|
|
color: color,
|
|
|
|
|
|
fill: color,
|
|
|
|
|
|
width: iconSize,
|
|
|
|
|
|
height: iconSize
|
|
|
|
|
|
}"
|
|
|
|
|
|
v-bind="$attrs"
|
|
|
|
|
|
>
|
|
|
|
|
|
<use :xlink:href="iconName" :fill="color" />
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
|
import { computed } from "vue";
|
|
|
|
|
|
defineOptions({ name: "SvgIcon" });
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
|
name: {
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
default: ""
|
|
|
|
|
|
},
|
|
|
|
|
|
color: {
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
default: ""
|
|
|
|
|
|
},
|
|
|
|
|
|
size: {
|
|
|
|
|
|
type: [Number, String],
|
|
|
|
|
|
default: 15
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 判断传入的值，是否带有单位，如果没有，就默认用px单位
|
|
|
|
|
|
const getUnitValue = (value: string | number): string | number => {
|
|
|
|
|
|
return /(px|em|rem|%)$/.test(value.toString()) ? value : value + "px";
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// svg大小
|
|
|
|
|
|
const iconSize = computed<string | number>(() => {
|
|
|
|
|
|
return getUnitValue(props.size);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// svg名称-对应资源文件夹的svg名称
|
|
|
|
|
|
const iconName = computed<string>(() => `#icon-${props.name}`);
|
|
|
|
|
|
|
|
|
|
|
|
// svg动态类名
|
|
|
|
|
|
const svgClass = computed<string>(() => {
|
|
|
|
|
|
if (props.name) return `svg-icon icon-${props.name}`;
|
|
|
|
|
|
return "svg-icon";
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scope>
|
|
|
|
|
|
.svg-icon {
|
|
|
|
|
|
width: auto;
|
|
|
|
|
|
height: auto;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
