如何使用包来构建导入SVG的React组件库?

我的团队正在开发一个React组件库,该库以npm包的形式发布。该库使用 parcel 。这是我们的 package.json :

"devDependencies": {
  "@parcel/packager-ts": "2.9.3",
  "@parcel/transformer-sass": "2.9.3",
  "@parcel/transformer-svg-react": "2.9.3",
  "@parcel/transformer-typescript-types": "2.9.3",
  "parcel": "2.9.3"
}

我们的组件导入SVG如下:

import IconAdd from 'icons/add.svg';

我们正在尝试使用 @parcel/transformer-svg-react 将我们的SVG转换为JSX。

我们遵循了这些 instructions ,所以我们 .parcelrc 文件如下所示:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "jsx:*.svg": [
      "...",
      "@parcel/transformer-svg-react"
    ],
    "jsx:*": [
      "..."
    ]
  }
}

当我们跑步时 parcel build ,该库似乎构建正确,然而,当我们在React应用程序中使用节点模块时,我们会得到以下错误:

Failed to execute 'createElement' on 'Document': The tag name provided ('file:///add.878b623c.svg') is not a valid name.

我们在Next.js(13.4.4)的新安装以及 Create React App 。在两个应用程序中都出现了相同的错误。

我们如何使用 包裹 到 build 我们的React组件库导入SVG,然后将其用作npm包?