forked from SmartBench/CMVR-IOT-UI
43 lines
705 B
Vue
43 lines
705 B
Vue
<template>
|
|
<svg
|
|
:width="size"
|
|
:height="size"
|
|
:style="svgStyle"
|
|
class="svg-icon"
|
|
aria-hidden="true"
|
|
>
|
|
<use :xlink:href="symbolId" />
|
|
</svg>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
name: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
size: {
|
|
type: [String, Number],
|
|
default: 24
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: 'currentColor'
|
|
},
|
|
customStyle: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
|
|
const symbolId = computed(() => `#icon-${props.name}`)
|
|
|
|
const svgStyle = computed(() => ({
|
|
verticalAlign: 'middle',
|
|
color: props.color, // 用 color 替代 fill
|
|
...props.customStyle
|
|
}))
|
|
</script>
|