replace babel-svg-loader with svgr+new-url-loader #4595
Conversation
|
@marella - you're going to get a lot of downloads 🤭 |
| { | ||
| loaderMap: { | ||
| svg: { | ||
| ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]', |
There was a problem hiding this comment.
Thanks @KutnerUri. I'm not familiar with the code base but it looks like you were using some svgr options in your previous config. So you may want to include these options in the svgr loader config. Example:
{
loader: '@svgr/webpack',
options: {
svgo: false,
titleProp: true,
ref: true,
},
}There was a problem hiding this comment.
ooh, thanks for the catch. I will add it
There was a problem hiding this comment.
@marella - I think it's safe to enable svgo (svg optimizer). We copied the config from Create React App.
What do you think?
There was a problem hiding this comment.
I don't know why CRA has it disabled, might be related to facebook/create-react-app#5062
If you want to enable it, I think you should have a look at its default plugins. For example removeViewBox plugin is enabled by default but some users might not want viewBox to be removed.
- add the svgr props included in the previous setup, as per @marella's comment [here](#4595 (review)): - pass titleProp - pass ref - (do not disable `svgo` svg optimizer.) - add the types needed to tag svg-as-react. (`ReactComponent`) - add the same types to the `react-workspace-learn-bit` template. (not sure how to check it, but `bit new` isn't user facing yet)
Proposed Changes
babel-plugin-named-asset-importwith svgr and native webpack5 toolsresolves #4462