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.
38 lines
900 B
38 lines
900 B
<template> |
|
<svg aria-hidden="true" :style="styles"> |
|
<use :xlink:href="symbolId" fill="currentColor" /> |
|
</svg> |
|
</template> |
|
|
|
<script lang="ts"> |
|
import { addUnit } from '@/utils/util' |
|
import type { CSSProperties } from 'vue' |
|
|
|
export default defineComponent({ |
|
props: { |
|
name: { |
|
type: String, |
|
required: true |
|
}, |
|
size: { |
|
type: [Number, String], |
|
default: 16 |
|
}, |
|
color: { |
|
type: String, |
|
default: 'inherit' |
|
} |
|
}, |
|
setup(props) { |
|
const symbolId = computed(() => `#${props.name}`) |
|
const styles = computed<CSSProperties>(() => { |
|
return { |
|
width: addUnit(props.size), |
|
height: addUnit(props.size), |
|
color: props.color |
|
} |
|
}) |
|
return { symbolId, styles } |
|
} |
|
}) |
|
</script>
|
|
|