How to handle image assets in React Library

I have scaffolded a React Library and a Next.js app using the generators. I am wanting to use a svg asset directly in a component but I’m unsure how to import/reference it. In CRA, I was able to do something like import { ReactComponent as MySVG } from 'path/to/my/file.svg'

[Bielik20]

I see issue is closed but I feel like it side tracked to handling icons/SVGs. Still title is “How to handle image assets in React Library” and this is exactly what I have problem with.

When doing stuff like that:

import image from './sample-image.jpg';

Doesn’t matter the size, this image gets bundled inline to library dist code (works fine for app bundler). I get why this happens - we do not know what configuration will be used to bundle final app. Still I have to ask is there a better way? Library could inform that in order to use it one needs to use some assets bundling plugins etc.

If there is no other way, perhaps we could at least update docs: https://nx.dev/latest/react/guides/adding-assets-react to inform about different behaviour with libs.

[owen26]

This thread should be reopened as it’s handling a totally different scenario that bundling SVG in NX libs (NOT apps)