无法从 Webpack 包导入 React 中的 SVG

Question

我有一个 React 应用程序，它从自己的组件库中导入组件。组件库是使用 Webpack 创建的 .js 包。 我正在导入的组件导入另一个导入 SVG 文件的文件。

导入 SVG 的原始非捆绑文件：

import React from "react";
import {ShoppingBag32} from '@carbon/icons-react';
import {ReactComponent as OwnIcon} from "../design/icons/OwnIcon.svg";

const foo = {
    shop: <ShoppingBag32/>,
    ownIcon: <OwnIcon/>,
};
export default foo;

@carbon/icons-react 图标在它们自己的普通 JS 包中预编译，工作正常。但是我自己的 SVG 无法正常工作。 我明白了：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a
class/function (for composite components) but got: undefined. You likely forgot to export your component
from the file it's defined in, or you might have mixed up default and named imports.

警告的堆栈跟踪指向包中定义ownIcon 的行。您可以看到 3rdparty 包的工作图标指向一个 ShoppingBag32 键，而我自己的 SVG 指向一个 ReactComponent 键。

var foo = {
  shop: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_0__["ShoppingBag32"], null),
  ownIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_design_icons_SolarPanel32_svg__WEBPACK_IMPORTED_MODULE_1__["ReactComponent"], null)
};

关于如何修复 SVG 导入的任何想法？

编辑

我找到了一个解决方法，img 标记可以与 SVG 路径一起用作源。但我不喜欢这个解决方案，因为我希望整个 SVG 标记在 DOM 中呈现，而不是 img 标记。

import React from "react";
import {ShoppingBag32} from '@carbon/icons-react';
import OwnIcon from "../design/icons/OwnIcon.svg";

const foo = {
    shop: <ShoppingBag32/>,
    ownIcon: <img src={OwnIcon}/>,
};
export default foo;

Answer 1

如果您使用默认的 create react 应用程序，则需要按如下方式引用您的 SVG：

import OwnIcon from "../design/icons/OwnIcon.svg";

它与 carbon 的 import {ShoppingBag32} from '@carbon/icons-react'; 类似的原因是因为它在该包中被引用为导出，而不是在本地 webpack 需要一个名称来默认导出图像。