45 lines
850 B
Vue
45 lines
850 B
Vue
<template>
|
|
<i :style="getStyle">
|
|
<svg :class="class" aria-hidden="true">
|
|
<use :xlink:href="symbolId" :stroke="color" :fill="color" />
|
|
</svg>
|
|
</i>
|
|
</template>
|
|
|
|
<script setup name="SvgIcon">
|
|
import { computed } from 'vue'
|
|
const props = defineProps({
|
|
prefix: {
|
|
type: String,
|
|
default: 'icon',
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: 'transparent',
|
|
},
|
|
size: {
|
|
type: [Number, String],
|
|
default: 10,
|
|
},
|
|
class: {
|
|
type: String,
|
|
default: "w-10 h-10",
|
|
},
|
|
})
|
|
|
|
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
|
|
const getStyle = computed(() => {
|
|
const { size } = props
|
|
let s = `${size}`
|
|
s = `${s.replace('px', '')}px`
|
|
return {
|
|
fontSize: s,
|
|
}
|
|
})
|
|
</script>
|
|
|