Files
vue3-element-admin/src/components/SvgIcon/index.vue
horizons 37c2197e76 fix: svg-icon组件颜色无法显示问题修复
Former-commit-id: 35e4c7754d862589b404d61f71f22cbce9c40628
2022-09-09 22:33:23 +08:00

42 lines
664 B
Vue

<template>
<svg
aria-hidden="true"
class="svg-icon"
:style="'width:' + size + ';height:' + size"
>
<use :xlink:href="symbolId" :fill="color" />
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
prefix: {
type: String,
default: 'icon'
},
iconClass: {
type: String,
required: false
},
color: {
type: String
},
size: {
type: String,
default: '1em'
}
});
const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>
<style scoped>
.svg-icon {
vertical-align: -0.15em;
overflow: hidden;
fill: currentColor;
}
</style>