svg图片怎么在vue项目中导入

在Vue项目中导入SVG图片有多种方法，以下是其中两种常用的方法：

1. 使用Vue CLI提供的Vue SVG Loader插件
- 在命令行中运行以下命令安装插件：

  npm install --save-dev vue-svg-loader

- 在Vue组件中引入SVG图片，例如：

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

2. 使用Vue组件来引入SVG图片
- 在项目中创建一个SVGIcon组件，例如：

  <template>
    <svg :class="className" :aria-hidden="true">
      <use :xlink:href="`#icon-${name}`"></use>
    </svg>
  </template>

  <script>
  export default {
    name: 'SVGIcon',
    props: {
      name: String,
      className: {
        type: String,
        default: ''
      }
    }
  }
  </script>

- 在需要使用SVG图片的Vue组件中引入SVGIcon组件，并传入对应的name属性和className属性，例如：

  <template>
    <div>
      <SVGIcon name="logo" className="logo-icon" />
    </div>
  </template>