63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<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>
|