60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<template>
|
|
<svg
|
|
:class="svgClass"
|
|
:width="resolvedSize"
|
|
:height="resolvedSize"
|
|
:style="svgStyle"
|
|
aria-hidden="true"
|
|
>
|
|
<use :xlink:href="symbolId" :fill="color || 'currentColor'" />
|
|
</svg>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
iconClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
className: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
size: {
|
|
type: [String, Number],
|
|
default: undefined
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
customStyle: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
|
|
const icon = computed(() => props.name || props.iconClass)
|
|
const symbolId = computed(() => `#icon-${icon.value}`)
|
|
const resolvedSize = computed(() => props.size ?? (props.name ? 24 : undefined))
|
|
const svgClass = computed(() => props.className ? `svg-icon ${props.className}` : 'svg-icon')
|
|
const svgStyle = computed(() => ({
|
|
color: props.color || undefined,
|
|
...props.customStyle
|
|
}))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.svg-icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: -0.15em;
|
|
fill: currentColor;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|