方案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>可以自定義尺寸，不會模糊
可以指定顏色
