Vue3中使用svg文件图标（TS）

在Vue 3中使用SVG图标，可以通过以下步骤进行：

1. 将SVG图标添加到项目中，通常放在src/assets目录下。
2. 在Vue组件中导入SVG图标，并使用<svg>元素和对应的属性来展示。

以下是一个简单的示例：

首先，将SVG图标保存到项目中，例如src/assets/icons/example.svg。

然后，创建一个Vue组件来使用这个SVG图标：

<template>
  <div>
    <!-- 使用svg图标 -->
    <svg class="icon" aria-hidden="true">
      <use :xlink:href="`#${iconName}`"></use>
    </svg>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
// 导入SVG图标
import '@/assets/icons/example.svg';
 
export default defineComponent({
  name: 'SvgIconExample',
 
  setup() {
    // SVG图标的ID
    const iconName = ref('example-icon');
 
    return { iconName };
  }
});
</script>
 
<style scoped>
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.15em;
}
</style>

确保你的webpack配置能够处理SVG文件，并且在<use>标签的xlink:href属性中使用图标的ID引用SVG图标。

注意：确保你的Vue项目配置了正确的loader来处理SVG文件，例如使用vue-loader和适合的SVG loader，如svg-url-loader或file-loader。