New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to handle image assets in React Library #2084
Comments
Duplicate of #1931. |
Hmmm... This is related but normally a React application has webpack config. I don't know how that would work with the library since the library has to be able to work in each application's webpack config. |
With the approach used in #1964, SVG files would be converted into JavaScript/TypeScript files that export standard React components. This is a mental shift: the SVG files would no longer be "assets" in the normal sense, but would instead be part of the application just like any other React components. The library would only be exporting JavaScript/TypeScript files, so applications consuming the library would not have to have any special Webpack configurations. |
Alright, so in this setup the application wouldn't be handling the SVG files directly anymore, correct? |
Correct, at least based on #1964 and the SVGR docs. |
Thank you for the explanation. I will close this in hopes that #1964 gets merged soon. |
@stramel Sorry, I thought that PR would make it possible to embed SVGs in React libraries. I need that functionality as well. |
@AdamVig I'm wondering if the react lib just needs the custom type since the app handles the bundling? |
Appears that works. I re-created the react lib for it which added the correct typing to the tsconfig. I'm still unable to get the app to work with the svg files but that should be under #1931. Closing again. My new {
"extends": "../../tsconfig.json",
"compilerOptions": {
"jsx": "react",
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"types": ["node", "jest"]
},
"files": [
"../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
"../../node_modules/@nrwl/react/typings/image.d.ts"
],
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
} |
@AdamVig What would be the best approach?
|
@sophiestix Hi 👋 we currently don't have the same asset handling available for publishable libraries. I suggest either using an external CSS file to handle images, or alternatively we are working on better asset handling in a future release (soon). |
Thank you @jaysoo for the quick response! 🤗 |
@stramel did you mange to do this? If yes how?
|
Oh noes! @jaysoo Any news about it? |
Yep, I sure did! my
I can then just import using I don't currently publish my library openly though, so I haven't run into that limitation |
FYI I got it to work with a custom rollup config:
I really hope nx will add this in the near future as this is the second custom config I'm having for adding SVGR support (the first one is a custom webpack config for StoryBook). |
@trumbitta I'm currently trying to create a publishable lib with react and @fluentui/react, but I'm facing issues with theirs svgs as well. Can you explain-me or provide more details with that approach you have done? |
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. |
I feel like this issue should be opened again until this comment from @jaysoo changes. Just like @trumbitta I too had to create a custom config to handle svgs for both rollup and storybook. I also had to do it for jest. See #4850 and #2859 |
please reopen this issue.. this is insane! |
@trumbitta you are a legend |
This thread should be reopened as it's handling a totally different scenario that bundling SVG in NX libs (NOT apps) |
It's been over a year and this is still closed? How do I handle image assets in a react library? |
@zeilsell-user1 I think it was recently fixed |
This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context. |
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'
The text was updated successfully, but these errors were encountered: