Import SVGs as React components (#1388) #3718

iansu · 2018-01-08T23:47:11Z

Use svgr webpack loader to wrap SVGs in React components as a named export. SVG filenames are still available as the default export.

import logo from './logo.svg'; // gives you the filename
import { ReactComponent as Logo } from './logo.svg'; // gives you a React component <Logo />

Closes #1388

gaearon · 2018-01-09T00:33:14Z

Nice, will check it out tomorrow!

gnapse · 2018-01-15T14:17:02Z

Thanks! This would be very nice to have. Can't wait to have it merged, as I'd hate to eject just for this.

iansu · 2018-01-16T17:15:07Z

@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.

iansu · 2018-01-16T18:22:40Z

I think the reason for doing this automatically is simplicity. While it's true that you can just do this yourself using the svgr binary that's extra work. You need to know to install a global package, you need to remember to rebuild any svg files you've changed and you need to keep both copies in your repo.

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.

gaearon · 2018-01-16T19:16:02Z

@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.

iansu · 2018-01-16T19:18:58Z

@gaearon Sounds good. This will probably also require some doc updates. Is that something that should happen as part of this PR or separately?

gaearon · 2018-01-16T19:21:40Z

It's okay to it in this PR if you add a note (similar to existing ones) that it only works with 2.0.

gaearon · 2018-01-16T19:22:02Z

It might be easier though to wait a little, and do a doc PR sprint before the releas.e

iansu · 2018-01-16T19:25:09Z

Sounds good. I'll hold off for now.

gaearon · 2018-01-17T13:07:02Z

packages/react-scripts/config/webpack.config.dev.js

@@ -235,6 +235,31 @@ module.exports = {
              },
            ],
          },


Don't we need a change in production config too?

gaearon · 2018-01-17T13:07:13Z

packages/react-scripts/config/webpack.config.dev.js

+                  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).


Probably doesn't make sense to repeat this comment.

gaearon · 2018-01-17T13:08:45Z

We'll need a new end-to-end test in fixtures/kitchensink for this. See existing tests for image inclusion for inspiration.

gaearon

Please fix the production config.
A component relying on this shouldn't fail the test. Notice how if you add this to App.js then yarn test fails. To fix this you probably want to muck with packages/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 with yarn test --no-cache to check your fix.
Add a fixture similar to existing SvgInclusion.

gaearon · 2018-01-17T16:43:33Z

packages/react-scripts/config/jest/fileTransform.js

@@ -15,6 +15,10 @@ const path = require('path');

 module.exports = {
  process(src, filename) {
+    if (filename.match(/\.svg$/)) {
+      return `module.exports = {ReactComponent: () => ('')};`;


If we don’t want to render anything can this just return null?

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.

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?

Maybe something like

module.exports = { __esModule: true, default: name, ReactComponent: () => name }

old

gaearon · 2018-01-17T18:11:07Z

packages/react-scripts/config/jest/fileTransform.js

+      return `module.exports = {
+        __esModule: true,
+        default: ${JSON.stringify(path.basename(filename))},
+        ReactComponent: () => null


Why not return the filename here as well? Seems like that would be more useful in e.g. snapshots.

gaearon · 2018-01-17T18:11:47Z

packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js

+describe('svg component', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<SvgComponent />, div);


And in this test you could verify the div.textContent matches the filename.

kellyrmilligan · 2018-03-06T18:26:04Z

@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 currentColor as the fill or stroke value to be able to style them with css. I see that's possible on the binary, but what about this?

* 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

Import SVGs as React components (facebook#1388)

0eba039

facebook-github-bot added the CLA Signed label Jan 9, 2018

tk-o mentioned this pull request Jan 14, 2018

Issue with loading SVG sprite gregberge/svgr#36

Closed

gaearon changed the base branch from master to next January 15, 2018 17:36

gaearon added 2 commits January 15, 2018 17:36

Merge branch 'next' into svg-component

0c84280

Merge branch 'next' into svg-component

3b91354

gaearon mentioned this pull request Jan 16, 2018

Roadmap for react-scripts@2.0 #3815

Closed

gaearon added the tag: new feature label Jan 17, 2018

gaearon added this to the 2.0.0 milestone Jan 17, 2018

gaearon reviewed Jan 17, 2018

View reviewed changes

gaearon previously requested changes Jan 17, 2018

View reviewed changes

Updated webpack production config and fixed tests

81f31ac

gaearon reviewed Jan 17, 2018

View reviewed changes

Improved Jest SVG file transform

8593bdd

gaearon reviewed Jan 17, 2018

View reviewed changes

iansu and others added 3 commits January 17, 2018 12:08

Improved SVG tests

c385b18

Add a comment

d400d19

Update webpack.config.prod.js

3872885

gaearon approved these changes Jan 17, 2018

View reviewed changes

gaearon merged commit 82907fd into facebook:next Jan 17, 2018

This was referenced Jan 17, 2018

Consider importing SVGs as React components #1388

Closed

"SVG as a component" doesn't quite work in 2.x #3856

Closed

cafca mentioned this pull request Feb 27, 2018

React Prerender und JS Tests abhängig von Babel SVG import cafca/metawahl#4

Closed

ianschmitz mentioned this pull request Jul 30, 2018

TypeScript support using Babel 7 #4837

Merged

11 tasks

lock bot locked and limited conversation to collaborators Jan 20, 2019

iansu deleted the svg-component branch October 18, 2019 05:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Import SVGs as React components (#1388) #3718

Import SVGs as React components (#1388) #3718

iansu commented Jan 8, 2018

gaearon commented Jan 9, 2018

gnapse commented Jan 15, 2018

iansu commented Jan 16, 2018

iansu commented Jan 16, 2018

gaearon commented Jan 16, 2018

iansu commented Jan 16, 2018

gaearon commented Jan 16, 2018

gaearon commented Jan 16, 2018

iansu commented Jan 16, 2018

gaearon Jan 17, 2018

gaearon Jan 17, 2018

gaearon commented Jan 17, 2018

gaearon left a comment

gaearon Jan 17, 2018

gaearon Jan 17, 2018

iansu Jan 17, 2018

gaearon Jan 17, 2018

gaearon Jan 17, 2018

gaearon Jan 17, 2018

kellyrmilligan commented Mar 6, 2018

@@ @@ -235,6 +235,31 @@ module.exports = { @@
                             },
                           ],
                         },

Import SVGs as React components (#1388) #3718

Import SVGs as React components (#1388) #3718

Conversation

iansu commented Jan 8, 2018

gaearon commented Jan 9, 2018

gnapse commented Jan 15, 2018

iansu commented Jan 16, 2018

iansu commented Jan 16, 2018

gaearon commented Jan 16, 2018

iansu commented Jan 16, 2018

gaearon commented Jan 16, 2018

gaearon commented Jan 16, 2018

iansu commented Jan 16, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jan 17, 2018

gaearon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kellyrmilligan commented Mar 6, 2018