1.安装依赖
pnpm i vite-plugin-svg-icons -D
2.在vite配置文件中使用 (vite.config.ts)
plugins: [
vue(),
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
symbolId: "icon-[dir]-[name]"
})
]
3. 在入口中引入 (main.ts)
import "virtual:svg-icons-register"
4. 模板中使用 (前提: "src/assets/icons" 路径下添加了svg图)
<template>
<h1>测试svg</h1>
<svg>
<use xlink:href="#icon-phone"></use>
</svg>
</template>
<script lang="ts" setup>
</script>
<style scoped>
</style>
