找不到模块“virtual:svg-icons-register”或其相应的类型声明的解决办法

用户72668617056982025-11-21 10:02

创建类型声明文件

在项目的 src 目录下创建一个类型声明文件，例如 vite-env.d.ts 或 global.d.ts：

typescript 复制代码

// src/vite-env.d.ts 或 src/global.d.ts

declare module 'virtual:svg-icons-register' {
  const component: any;
  export default component;
}

或者更详细的类型声明：

typescript 复制代码

// src/vite-env.d.ts

declare module 'virtual:svg-icons-register' {
  import { Plugin } from 'vite';
  
  // 根据实际使用的 svg 图标库进行调整
  const svgIconsRegister: Plugin;
  export default svgIconsRegister;
}

在 tsconfig.json 中包含声明文件

确保你的 tsconfig.json 包含了类型声明文件，vite创建的项目会有tsconfig.app.json和tsconfig.noed.json同理在include声明文件路径，如src文件夹下面的vite-env.d.ts文件声明为"src/vite-env.d.ts"

typescript 复制代码

{
  "compilerOptions": {
    // ... 其他配置
  },
  "include": [
    "src/**/*",
    "src/**/*.d.ts",
    "src/vite-env.d.ts" // 确保包含你的声明文件
  ]
}

检查依赖和配置

确保正确安装了插件vite-plugin-svg-icons，不确定包是否丢失建议重新安装一遍

bash 复制代码

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

并在 vite.config.ts 中正确配置：

typescript 复制代码

// vite.config.ts
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
		iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
        symbolId: 'icon-[dir]-[name]'
    }),
    // ... 其他插件
  ],
});