vue中使用svg图像

在Vue中使用SVG图像，你可以将SVG文件导入为Vue组件，然后像任何其他组件一样使用它。以下是一个简单的例子：

1. 创建一个SVG组件（例如 SvgIcon.vue）:

<template>
  <svg :width="width" :height="height" viewBox="0 0 1024 1024" fill="currentColor">
    <path d="你的SVG路径"></path>
    <!-- 其他SVG元素 -->
  </svg>
</template>
 
<script>
export default {
  name: 'SvgIcon',
  props: {
    width: {
      type: [String, Number],
      default: '1em'
    },
    height: {
      type: [String, Number],
      default: '1em'
    }
  }
}
</script>

2. 在父组件中使用这个SVG组件：

<template>
  <div>
    <SvgIcon width="50" height="50"/>
  </div>
</template>
 
<script>
import SvgIcon from './SvgIcon.vue'
 
export default {
  components: {
    SvgIcon
  }
}
</script>

确保你的SVG图像是SVG格式，并且你的路径是正确的。你可以通过将SVG文件转换为组件或者直接编写SVG代码来创建一个SVG图像。使用width和height属性可以调整图像的大小。