I am trying to figure out the best way to import SVG images directly as JSX components inside my React common component library. By "common component library" I mean a separate package that contains common components that a variety of web apps within my organization can use.

Here is an example of a monorepo setup with both a web app (apps/web) and a common ui library (packages/my-core) that uses a library called Turborepo: https://github.com/MahdiTa97/turborepo-boilerplate/blob/main/package.json

Typically in a NextJS or Create React App project I would take advantage of the SVGR webpack plugin and write an import statement like this:

import { ReactComponent as ExampleIcon } from 'common-ui-library/images/icon.svg'

and would use ExampleIcon like any ordinary React component.

Things are a little bit different in the context of a common UI library. Webpack isn't being used in the library and to my knowledge everything contained within this "common ui library" needs to be a proper module.

The last thing I want to do is to set up a separate "images" package that uses Rollup (or similar) and some sort of watcher that runs any time I am developing.

I am really happy with how this particular setup allows me to develop without needing to run a separate watcher process for the common ui library.