<template>
  <div v-html="svgContent" :id="id"></div>
</template>

<script>
export default {
  name: "svg-viewer",
  props: {
    id: {
            type: String,
            default: 'id',
        },
    src: {
      type: String,
      default() {
        return ''
      }
    }
  },
  watch: {
    src: {
      immediate: true,
      handler(val) {
        if (!val) {
          this.svgContent = ''
          return;
        }
        fetch(val)
            .then(res => res.text())
            .then(ctx => this.svgContent = ctx)
      }
    }
  },
  data() {
    return {
      svgContent: ''
    }
  }
}
</script>

<style scoped>

</style>
