“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,
}