Vue3 中使用svg文件

在 Vue3 中使用 SVG 文件有多种方式，以下是其中的两种方法：

1. 使用 Vue CLI 创建项目时，可以选择使用 Vue CLI 插件 vue-svg-loader。安装完成后，可以在 Vue 组件中直接引入 SVG 文件：

<template>
  <div>
    <img src="./assets/logo.svg" alt="Logo" />
  </div>
</template>

2. 另一种方法是使用 Vue3 提供的内置组件 `<svg>`，将 SVG 文件作为组件的模板。例如：

<template>
  <div>
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
  </div>
</template>

这里的 SVG 图形是直接嵌入在 Vue 组件中的。如果需要引用外部的 SVG 文件，可以使用 `v-html` 指令：

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

<script>
import mySvg from "./assets/my-svg.svg";

export default {
  data() {
    return {
      svgContent: mySvg,
    };
  },
};
</script>

注意，使用 `v-html` 指令需要注意安全性问题，确保 SVG 文件是可信的。