在 Vite 中将 SVG 导入为 ReactComponent - 不明确的间接导出：ReactComponent

Question

我正在尝试使用 Vite 和插件将 SVG 作为 ReactComponent 导入vite-plugin-svgr，但遇到了一个我认为与类型相关的错误。

这是我的导入声明和用法：

import { ReactComponent as ProfileIcon } from '../assets/profile.svg'

export function Example() {
    return (
        <div>
            <p>blahblahblah</p>
            <ProfileIcon />
        <div>
    }
}

该页面根本无法加载，并且我的浏览器控制台显示以下错误：

未捕获的语法错误：不明确的间接导出：ReactComponent

我认为这与我的custom.d.ts文件有关，其中包含以下声明：

declare module '*.svg' {
    import * as React from 'react'

    export const ReactComponent: React.FunctionComponent<
        React.ComponentProps<'svg'> & { title?: string }
    >
    export default ReactComponent
}

我在解决另一个 TypeScript 错误后添加了此声明，许多 StackOverflow 用户发布了相同的建议，但这里有一个示例。

我似乎找不到适合我的 React + Vite + TypeScript SVG 组件指南。

作为参考，以下是我所做的一些其他更改：

tsconfig.json

{
    "compilerOptions": {
        ...
        "types": ["vite-plugin-svgr/client"]
    },
    ...
    "include": ["src", "custom.d.ts"]
}

vite-env.d.ts

/// <reference types="vite-plugin-svgr/client" />
/// <reference types="vite/client" />

Answer 1

我过去多次遇到过同样的错误。虽然我不确定根本原因，但使用“@svgr/rollup”库对我有用：

1 安装“@svgr/rollup”库：

$ npm install @svgr/rollup

2 配置 Vite 使用“@svgr/rollup”处理 SVG 文件，将其添加到“vite.config.ts”文件中：

import svgr from "@svgr/rollup";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
});

3 通过将其添加到“custom.d.ts”文件来定义 SVG 文件的 TypeScript 类型：

declare module "*.svg" {
  import React = require("react");
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}