refactor: simplify SvgIcon component by removing unused img tag and cleaning up iconName computation

This commit is contained in:
bighuixiang
2025-06-18 23:59:18 +08:00
parent 9ef77450ba
commit 226b7470ec

View File

@@ -1,16 +1,12 @@
<template> <template>
<div class="c-svg"> <div class="c-svg">
<!-- <svg <svg
:class="svgClass" :class="svgClass"
v-bind="$attrs" v-bind="$attrs"
:style="{ color: color, fontSize: size + 'px' }" :style="{ color: color, fontSize: size + 'px' }"
> >
<use :href="iconName"></use> <use :href="iconName"></use>
</svg> --> </svg>
<img
:class="svgClass"
v-bind="$attrs"
:style="{ color: color, fontSize: size + 'px' }" :src='iconName' alt="">
</div> </div>
</template> </template>
@@ -30,12 +26,7 @@ const props = defineProps({
default: 16, default: 16,
}, },
}); });
const iconName = computed(() => { const iconName = computed(() => `#icon-${props.name}`);
console.log(require(`@/assets/icons/${props.name}.svg`))
return require(`@/assets/icons/${props.name}.svg`)
return imgUrl
});
// const iconName = computed(() => `#icon-${props.name}`);
const svgClass = computed(() => { const svgClass = computed(() => {
if (props.name) return `svg-icon icon-${props.name}`; if (props.name) return `svg-icon icon-${props.name}`;
return "svg-icon"; return "svg-icon";