51 lines
1.0 KiB
Vue
51 lines
1.0 KiB
Vue
<template>
|
|
<div ref="svgContainer" class="svg-icon" :style="{ 'font-size': size + 'px' }"></div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "index",
|
|
props: {
|
|
name: {
|
|
type: String
|
|
},
|
|
size: {
|
|
type: Number,
|
|
default: 26
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {},
|
|
created() {
|
|
if (this.name) {
|
|
fetch("/assets/platform/img/svg/" + this.name + ".svg")
|
|
.then(async (res) => {
|
|
const svg = await res.text()
|
|
if (this.$refs.svgContainer) {
|
|
this.$refs.svgContainer.innerHTML = ""
|
|
this.$refs.svgContainer.innerHTML = svg
|
|
}
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.svg-icon {
|
|
display: inline-flex;
|
|
font-size: 20px;
|
|
}
|
|
.svg-icon svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: -0.15em;
|
|
fill: currentColor;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|