Add forward ref to React SVG Component

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

@@ -21,10 +21,10 @@ module.exports = {
       return `module.exports = {
         __esModule: true,
         default: ${assetFilename},
-        ReactComponent: (props) => ({
+        ReactComponent: ({ svgRef, ...props }) => ({
           $$typeof: Symbol.for('react.element'),
           type: 'svg',
-          ref: null,
+          ref: svgRef || null,
           key: null,
           props: Object.assign({}, props, {
             children: ${assetFilename}

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

@@ -249,7 +249,8 @@ module.exports = {
                   {
                     loaderMap: {
                       svg: {
-                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
+                        ReactComponent:
+                          '@svgr/webpack?-prettier,+ref,-svgo![path]',
                       },
                     },
                   },

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

@@ -325,7 +325,8 @@ module.exports = {
                   {
                     loaderMap: {
                       svg: {
-                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
+                        ReactComponent:
+                          '@svgr/webpack?-prettier,+ref,-svgo![path]',
                       },
                     },
                   },
@@ -476,7 +477,8 @@ module.exports = {
     }),
     // Inlines the webpack runtime script. This script is too small to warrant
     // a network request.
-    shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
+    shouldInlineRuntimeChunk &&
+      new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

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

@@ -8,4 +8,10 @@
 import React from 'react';
 import { ReactComponent as Logo } from './assets/logo.svg';
 
-export default () => <Logo id="feature-svg-component" />;
+export default () => {
+  return <Logo id="feature-svg-component" />;
+};
+
+export const SvgComponentWithRef = ({ svgRef }) => (
+  <Logo id="feature-svg-component-with-ref" svgRef={svgRef} />
+);

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

@@ -7,12 +7,21 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import SvgComponent from './SvgComponent';
+import SvgComponent, { SvgComponentWithRef } from './SvgComponent';
 
 describe('svg component', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(<SvgComponent />, div);
     expect(div.textContent).toBe('logo.svg');
   });
+
+  it('svg root element ref is passed svgRef', () => {
+    const div = document.createElement('div');
+    const someRef = React.createRef();
+    ReactDOM.render(<SvgComponentWithRef svgRef={someRef} />, div);
+    const svgElement = div.getElementsByTagName('svg');
+    expect(svgElement).toHaveLength(1);
+    expect(svgElement[0]).toBe(someRef.current);
+  });
 });