46 lines
1.0 KiB
JavaScript
46 lines
1.0 KiB
JavaScript
export default {
|
|
props: {
|
|
src: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
fill: {
|
|
type: String,
|
|
default: 'currentColor'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
svg: ''
|
|
}
|
|
},
|
|
watch: {
|
|
async src(newSrc, oldSrc) {
|
|
if (newSrc !== oldSrc) {
|
|
this.fetchSVG(newSrc);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
async fetchSVG(src) {
|
|
try {
|
|
const res = await fetch(src);
|
|
if (res.ok) {
|
|
const html = await res.text();
|
|
this.svg = html;
|
|
} else {
|
|
console.error('SVG Loaded Error:', res.statusText);
|
|
}
|
|
} catch (error) {
|
|
console.error('Fetch Error:', error);
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchSVG(this.src);
|
|
},
|
|
template: `
|
|
<div v-html="svg" :style="{fill: fill}" />
|
|
`
|
|
}
|