一、异常错误

本地运行vue3+vite项目，使用到了svg，npm 安装和运行报错，错误信息显示：createSvgIconsPlugin is not a function，这表明插件的导入方式或版本存在问题。

二、原因

这是因为vite-plugin-svg-icons插件版本过旧导致的。根据错误信息和package.json，当前使用的是0.1.0版本，这个版本与Vite 7.x不兼容。

三、解决方法

方案1：升级vite-plugin-svg-icons插件（推荐）

升级到与Vite 7.x兼容的版本：

pnpm install vite-plugin-svg-icons@^2.0.1 -D

方案2：修改导入方式

如果升级后仍有问题，可能需要修改中的导入方式：

vite.config.ts

import { resolve } from 'path'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

function setupPlugins(env) {
  return [
    vue(),
    env.VITE_GLOB_APP_PWA === 'true' && VitePWA({
      injectRegister: 'auto',
      manifest: {
        name: 'chatGPT',
        short_name: 'chatGPT',
        icons: [
          { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
          { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
        ],
      },
    }),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
      // 指定 symbolId 格式
      symbolId: 'icon-[name]',
    }),
  ].filter(Boolean);
}

export default defineConfig(({ mode }) => {
  const viteEnv = loadEnv(mode, process.cwd())

  return {
    resolve: {
      alias: {
        '@': resolve(process.cwd(), 'src'),
      },
    },
    plugins: setupPlugins(viteEnv),
    // ... existing code ...
  }
})

方案3：完整的依赖升级

如果问题持续存在，建议同时升级相关依赖：

pnpm install vite@^5.4.0 vite-plugin-svg-icons@^2.0.1 -D

方案4：使用cnpm

cnpm install vite-plugin-svg-icons -D

参考：https://www.cnblogs.com/yehx/p/17081436.html.
https://blog.csdn.net/CHUAMING/article/details/136725039