vue3中使用svg

在Vue 3中使用SVG图标，可以采取以下几种方法：
1. 使用Vue插件：可以使用一些常见的Vue插件，如vue-svg-icon和vue-fontawesome，通过npm安装插件，然后在Vue项目中引入插件并使用SVG图标组件。具体的使用方法可以参考插件文档。例如，可以使用以下代码安装并使用vue-svg-icon插件：

npm install vue-svg-icon

import { createApp } from 'vue';
import App from './App.vue';
import VueSvgIcon from 'vue-svg-icon';

const app = createApp(App);
app.use(VueSvgIcon);
app.mount('#app');

然后，在Vue模板中使用SVG图标组件，并指定图标名称：

<template>
  <div>
    <svg-icon name="icon-name" />
  </div>
</template>

2. 使用CSS背景图：可以直接在项目中使用SVG图标的代码，并通过CSS控制图标的大小和样式。例如：

<svg style="width: 10px; height: 10px">
  <use href="#icon-shanchu"></use>
</svg>

3. 直接在Vue模板中插入SVG图标代码：可以将SVG图标代码直接复制到Vue模板中，并根据需要添加样式和属性。例如：

<template>
  <div>
    <svg class="icon" viewBox="0 0 24 24">
      <path d="M12 2L1 21h22L12 2zm0 4.88L18.12 19H5.88L12 6.88z" />
    </svg>
  </div>
</template>
<style>
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
</style>

4. 封装为Vue组件：可以将SVG图标封装为Vue组件，以便在应用程序中多次使用。创建一个新的Vue组件，并在模板中使用`<svg>`标签来插入SVG图标代码。例如，创建一个名为`Icon`的Vue组件：

<template>
  <div>
    <Icon />
  </div>
</template>
<script>
import Icon from './Icon.vue';
export default {
  components: {
    Icon
  }
};
</script>
<!-- Icon.vue -->
<template>
  <svg class="icon" viewBox="0 0 24 24">
    <path d="M12 2L1 21h22L12 2zm0 4.88L18.12 19H5.88L12 6.88z" />
  </svg>
</template>
<style>
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
</style>

以上就是在Vue 3中使用SVG图标的几种方法。具体选择哪种方法取决于你的项目需求和个人偏好。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>