1.安装插件

pnpm install vite-plugin-svg-icons -D

pnpm install fast-glob

2.配置 vite.config.ts

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // 与本地储存地址一致
        // 指定symbolId格式
        symbolId: 'icon-[name]',
      }),
    ],
  }
}

3.在 src/main.ts 中注入脚本

import 'virtual:svg-icons-register'

4.创建 SvgIcon 公共组件

// 例如: components/SvgIcon/index.vue
<template>
  <svg aria-hidden="true" class="cp-icon">
    <use :href="`#icon-${name}`" />
  </svg>
</template>

<script setup lang="ts">
  defineProps<{
    name: string
  }>()
</script>

5.在组件中使用

复制代码
<SvgIcon name="money"></SvgIcon>

参考

blog.csdn.net/pifae/artic…