我试图找出在我的 React 通用组件库中直接将 SVG 图像作为 JSX 组件导入的最佳方法。“通用组件库”是指一个单独的包，其中包含我组织内的各种 Web 应用程序可以使用的通用组件。
这是一个使用名为 Turborepo 的库的 web 应用程序 (apps/web) 和通用 ui 库 (packages/my-core) 的 monorepo 设置示例：https ://github.com/MahdiTa97/turborepo-boilerplate /blob/main/package.json
通常在 NextJS 或 Create React App 项目中，我会利用 SVGR webpack 插件并编写如下导入语句：
import { ReactComponent as ExampleIcon } from 'common-ui-library/images/icon.svg'
并且会像使用任何普通的 React 组件一样使用 ExampleIcon。
在通用 UI 库的上下文中，情况有些不同。Webpack 没有在库中使用，据我所知，这个“通用 ui 库”中包含的所有内容都需要是一个合适的模块。
我想做的最后一件事是设置一个单独的“图像”包，它使用 Rollup（或类似的）和某种在我开发时运行的观察器。
我对这种特殊设置如何让我无需为通用 ui 库运行单独的观察程序即可进行开发感到非常满意。