vire+vue项目使用svg

使用SVG（可缩放矢量图形）是在Vue项目中添加矢量图形的一种简单方法。下面是在Vue项目中使用SVG的一些步骤：

1. 将SVG文件保存在您的Vue项目中的assets目录中。例如，您可以在assets/icons目录中创建一个名为“icon.svg”的文件。

2. 在Vue组件中使用SVG。例如，您可以在Vue组件的template中使用以下代码：

<template>
  <div>
    <svg>
      <use xlink:href="assets/icons/icon.svg#my-icon"></use>
    </svg>
  </div>
</template>

在此示例中，我们使用`<use>`元素将SVG文件中的特定ID（在此示例中为“my-icon”）与页面上的元素相关联。请注意，我们在xlink:href属性中使用的路径包括SVG文件的路径以及ID。

3. 在Vue组件中定义使用的SVG图标。例如，您可以在Vue组件的script部分中添加以下代码：

<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        icons: {
          'my-icon': require('@/assets/icons/icon.svg')
        }
      }
    }
  }
</script>

在此示例中，我们将SVG文件的路径与ID相关联，并将其保存在Vue组件的data中。在template中使用`icons`对象中定义的ID来引用SVG文件。

这些是在Vue项目中使用SVG的基本步骤。您可以根据需要对其进行修改和扩展。