vue3中阿里SVG图标配置与应用

安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

在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: 'icon-[dir]-[name]',
      }),
    ],
  }
}

入口文件导入

确保你在项目的入口文件（如 src/main.ts 或 src/main.js）中引入了 virtual:svg-icons-register：

import 'virtual:svg-icons-register'

出现virtual:svg-icons-register报错，找不到模块，解决方法

TypeScript 无法识别 virtual:svg-icons-register 这个虚拟模块，因此需要为它添加类型声明。
1.在项目的根目录下或src目录下，创建一个 vite-env.d.ts 文件（如果已有，直接编辑），并添加以下内容：

/// <reference types="vite/client" />
/// <reference types="vite-plugin-svg-icons/client" />
// 如果上面的代码不能解决，就加上手动的声明
declare module 'virtual:svg-icons-register' {
    const content: any;
    export default content;
}

2.确保 tsconfig.json 包含类型声明
确保你的 tsconfig.json 文件中包含了 vite-env.d.ts 文件。通常，tsconfig.json 的 include 字段会包含 src 目录和类型声明文件：

{
{
  "references": [
	    {
	      "path": "./tsconfig.app.json",
	      // 一定要加上下边的，否则报错
	      "composite": true
	    }
   ]
  "include": ["src", "vite-env.d.ts"]
}