-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Scripts: Replace url-loader for SVGs with asset modules #39407
base: trunk
Are you sure you want to change the base?
Conversation
Size Change: 0 B Total Size: 1.16 MB ℹ️ View Unchanged
|
Yes, it's not easy to decide. I would say, it's fine to include in Thank you for working on the PR. It nicely aligns with other changes related to how webpack 5 handles assets. It's another breaking change, so I hope it won't cause too much distraction. I wish we would add it earlier with all other webpack 5 changes. |
What?
This PRs tries to replace
url-loader
for SVGs with Asset Modules which were introduced in webpack 5.Why?
The current solution is deprecated and it's recommend in the documentation of
@svgr/webpack
to use the asset modules. Also, If you want to use a SVG as a React component you currently have to explicitly import aReactComponent
like so:How?
I'm removing
url-loader
as a dependency and updated the implementation based on https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project. Now you can do:Unfortunately,
'./star.svg?url'
is currently causing an ESLint error:That's why I added the webpack resolver. But I'm currently not sure if that's a good idea and/or whether this can be part of the eslint-plugin instead and maybe a simple custom resolver which only handles this part should be created.
Testing Instructions
npx wp-create-block example-static --no-wp-scripts
example-static
edit.js
Edit()
by adding the following into the existing paragraph element:../node_modules/.bin/wp-scripts build
The build folder should now have an
images
directory with the SVG andindex.js
has also the SVG element.Visual output: