vue3+ts实现加载svg图片

此方式需要使用tsx

创建一个文件myIcon.tsx

import { defineComponent } from "vue";

const RenderVnode = defineComponent({
  props: {
    iconName: {
      type: String,
      default: ""
    }
  },
  render() {
    let svg: any
    const path = "svg/" + this.iconName + ".svg"
    fetch(path).then(res => {
      res.text().then(res => {
        const parser = new DOMParser();
        const htmlDoc = parser.parseFromString(res, "text/html");
        try {
          svg = htmlDoc.documentElement.getElementsByTagName("svg")[0];
          // console.log(svg)
          svg.style.margin = "0"
          svg.setAttribute("width", "100%")
          svg.setAttribute("height", "100%")
        } catch (e) {
          // 
        }
      })
    })
    return <div ref={((el: any) => {
      let count = 10
      let timer: any = setInterval(() => {
        if (count <= 0) {
          console.error(path + "加载失败")
          clearInterval(timer)
          timer = null
        }
        if (svg && el) {
          el.appendChild(svg)
          clearInterval(timer)
          timer = null
        }
        count--
      },100)
    })}></div>
  },
});

export default RenderVnode;

在public文件夹下创建svg文件夹
将svg文件放入public/svg文件夹
引用上面写的组件
iconName为文件名
比如public/svg/test.svg

import myIcon from '@/icon/myIcon'
......
<myIcon class="icon" iconName="test"></myIcon>

想要设置svg大小只需要在myIcon外嵌套个div设置div大小即可
#！！！！！外层div要设置display:flex