Estoy tratando de encontrar la mejor manera de importar imágenes SVG directamente como componentes JSX dentro de mi biblioteca de componentes comunes de React. Por "biblioteca de componentes comunes" me refiero a un paquete separado que contiene componentes comunes que pueden usar una variedad de aplicaciones web dentro de mi organización.

Aquí hay un ejemplo de una configuración de monorepo con una aplicación web (aplicaciones/web) y una biblioteca de interfaz de usuario común (paquetes/mi-núcleo) que usa una biblioteca llamada Turborepo: https://github.com/MahdiTa97/turborepo-boilerplate /blob/main/paquete.json

Por lo general, en un proyecto NextJS o Create React App, aprovecharía el complemento del paquete web SVGR y escribiría una declaración de importación como esta:

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

y usaría ExampleIcon como cualquier componente React ordinario.

Las cosas son un poco diferentes en el contexto de una biblioteca de interfaz de usuario común. Webpack no se está utilizando en la biblioteca y, según mi conocimiento, todo lo contenido en esta "biblioteca de interfaz de usuario común" debe ser un módulo adecuado.

Lo último que quiero hacer es configurar un paquete de "imágenes" separado que use Rollup (o similar) y algún tipo de observador que se ejecute en cualquier momento que esté desarrollando.

Estoy muy contento con la forma en que esta configuración en particular me permite desarrollar sin necesidad de ejecutar un proceso de observación separado para la biblioteca de interfaz de usuario común.