svg-icon怎么使用在vue中

要在Vue中使用SVG图标，可以使用以下步骤：

1. 将SVG图标保存为单独的文件，如"icon.svg"。

2. 使用vue-svg-loader将SVG文件导入Vue组件中：

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

<script>
import SvgIcon from '@/components/SvgIcon.vue'

export default {
  components: {
    SvgIcon
  }
}
</script>

3. 创建SvgIcon组件：

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    name: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.name}`
    },
    svgClass () {
      if (this.className) {
        return `svg-icon ${this.className}`
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

4. 在项目中使用icon.svg：

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

<script>
import SvgIcon from '@/components/SvgIcon.vue'

export default {
  components: {
    SvgIcon
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

这样就可以在Vue项目中使用SVG图标了。