最好的svg使用方案（个人觉得）

方案1：img

将svg作为img的src

import icon from './xxx.svg'

<img :src="icon">

无法很好的自定义尺寸，图片会模糊（使用了img后，会丧失svg的特性）
无法指定颜色

方案2：插件

添加vite-svg-loader插件

找了好几个常见的插件，比如vite-plugin-svg-icons、vite-plugin-svg-loader、unplugin-icons、iconify，感觉都不太好用，这些插件使用前都要在vite先中指定目录，要不就是需要提前配置要使用的图标，都不太好用。最后发现vite-svg-loader，感觉完美，记录分享下。

配置：

// vite.config.js

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [
    vue(),
    svgLoader({
      defaultImport: "component"
    })]
})

使用：

<script setup lang="ts">
import IconPlay from "@/assets/play.svg"
// @符号是我的路径别名，如果你没配置，则使用你的相对路径就好
// 示例：import IconPlay from "./play.svg"
</script>

<template>
  <IconPlay class="play-icon" />
</template>

<style scoped>
.play-icon {
  width: 24px;
  height: 24px;
  color: #ffffff;
}
</style>

可以自定义尺寸，不会模糊
可以指定颜色