'ReactComponent' 不是从 svg 导出的

Question

我使用 CRA 创建了一个打字稿应用程序，代码如下：

import { ReactComponent as Search } from './search.svg'

它运行良好，现在我想将此代码剥离到一个 npm 包（库）中。我首先再次运行 CRA 创建了这个包，然后删除了所有看起来不相关的内容（例如公用文件夹）。 /dist 的简化版本如下所示：

esm/
   icon/
      index.d.ts
      index.js
   index.d.ts
   index.js

这是原icon/index.ts：

/// <reference types="react-scripts" />
import { ReactComponent as Search } from './search.svg'
export const Icons = {
  Search,
}

这是编译后的icon/index.d.ts：

/// <reference types="react" /> <-- Changed for some reason??
export declare const Icons: {
    Search: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
        title?: string | undefined;
    }>;
};

当我尝试运行使用此库的应用时，我收到以下错误：

../dist/esm/common/icon/index.js Attempted import error:
'ReactComponent' is not exported from './search.svg' (imported as 'Search').

我该如何解决这个问题？

Answer 1

您将 svg 文件导入为默认导入，不带括号。

下面是一个例子

/// <reference types="react-scripts" />
import Search from './search.svg'
export const Icons = {
  Search,
}