-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
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
Import SVGs as React components (#1388) #3718
Conversation
Nice, will check it out tomorrow! |
Thanks! This would be very nice to have. Can't wait to have it merged, as I'd hate to eject just for this. |
@gaearon I see this is on the 2.0 roadmap in the "likely but needs work" list. Let me know what I can do to get this ready. |
I think the reason for doing this automatically is simplicity. While it's true that you can just do this yourself using the Doing it via webpack does't require the user to do any of these things. Webpack will also only compile any files that have changed so, while this does add a bit of overhead to the initial build, subsequent builds won't be affected. |
@iansu It's the closest category to "landed", I think the only thing it needs is a review. I'll try to test it in the coming days but would appreciate if more people did that. Unfortunately I don't have a super easy way to release test builds right now. |
@gaearon Sounds good. This will probably also require some doc updates. Is that something that should happen as part of this PR or separately? |
It's okay to it in this PR if you add a note (similar to existing ones) that it only works with 2.0. |
It might be easier though to wait a little, and do a doc PR sprint before the releas.e |
Sounds good. I'll hold off for now. |
@@ -235,6 +235,31 @@ module.exports = { | |||
}, | |||
], | |||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Don't we need a change in production config too?
babelrc: false, | ||
presets: [require.resolve('babel-preset-react-app')], | ||
// @remove-on-eject-end | ||
// This is a feature of `babel-loader` for webpack (not Babel itself). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Probably doesn't make sense to repeat this comment.
We'll need a new end-to-end test in |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Please fix the production config.
- A component relying on this shouldn't fail the test. Notice how if you add this to
App.js
thenyarn test
fails. To fix this you probably want to muck withpackages/react-scripts/config/jest/fileTransform.js
and add a special case there. It's fine to shim it with just an empty<svg>
or something like this. Don't forget to re-run tests withyarn test --no-cache
to check your fix. - Add a fixture similar to existing
SvgInclusion
.
@@ -15,6 +15,10 @@ const path = require('path'); | |||
|
|||
module.exports = { | |||
process(src, filename) { | |||
if (filename.match(/\.svg$/)) { | |||
return `module.exports = {ReactComponent: () => ('')};`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we don’t want to render anything can this just return null?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not quite accurate. There should be two exports: default and named one. Tests that expect this to render to the filename shouldn’t start failing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wasn't exactly sure what to return there. Null would probably work. Also wasn't sure about the exports. How do you return a default and named export using module.exports
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe something like
module.exports = {
__esModule: true,
default: name,
ReactComponent: () => name
}
return `module.exports = { | ||
__esModule: true, | ||
default: ${JSON.stringify(path.basename(filename))}, | ||
ReactComponent: () => null |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not return the filename here as well? Seems like that would be more useful in e.g. snapshots.
describe('svg component', () => { | ||
it('renders without crashing', () => { | ||
const div = document.createElement('div'); | ||
ReactDOM.render(<SvgComponent />, div); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And in this test you could verify the div.textContent
matches the filename.
@iansu this looks awesome! one question, will this hide the ability to replace attribute values? most svg icon workflows i've seen you need to have |
* Import SVGs as React components (facebook#1388) * Updated webpack production config and fixed tests * Improved Jest SVG file transform * Improved SVG tests * Add a comment * Update webpack.config.prod.js
* Import SVGs as React components (#1388) * Updated webpack production config and fixed tests * Improved Jest SVG file transform * Improved SVG tests * Add a comment * Update webpack.config.prod.js # Conflicts: # packages/react-scripts/package.json
* Import SVGs as React components (facebook#1388) * Updated webpack production config and fixed tests * Improved Jest SVG file transform * Improved SVG tests * Add a comment * Update webpack.config.prod.js
Use
svgr
webpack loader to wrap SVGs in React components as a named export. SVG filenames are still available as the default export.Closes #1388