You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
945 B
51 lines
945 B
<script lang="ts"> |
|
import { computed, defineComponent } from 'vue' |
|
|
|
export default defineComponent({ |
|
name: 'SvgIcon', |
|
props: { |
|
prefix: { |
|
type: String, |
|
default: 'icon', |
|
}, |
|
name: { |
|
type: String, |
|
required: true, |
|
}, |
|
color: { |
|
type: String, |
|
default: '', |
|
}, |
|
className: { |
|
type: String, |
|
default: '', |
|
}, |
|
}, |
|
setup(props) { |
|
const symbolId = computed(() => `#${props.prefix}-${props.name}`) |
|
const svgClass = computed(() => { |
|
if (props.className) |
|
return `svg-icon ${props.className}` |
|
|
|
return 'svg-icon' |
|
}) |
|
return { symbolId, svgClass } |
|
}, |
|
}) |
|
</script> |
|
|
|
<template> |
|
<svg :class="svgClass" aria-hidden="true"> |
|
<use :href="symbolId" :fill="color" /> |
|
</svg> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.svg-icon { |
|
width: 1em; |
|
height: 1em; |
|
vertical-align: -0.15em; |
|
fill: currentColor !important; |
|
overflow: hidden; |
|
} |
|
</style>
|
|
|