refactor: simplify SvgIcon component by removing unused img tag and cleaning up iconName computation
This commit is contained in:
@@ -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";
|
||||||
|
|||||||
Reference in New Issue
Block a user