feat(webpack): svg loader rules have been updated

docusaurus/docs/adding-images-fonts-and-files.md

@@ -47,21 +47,24 @@ An alternative way of handling static assets is described in the next section.
 
 > Note: this feature is available with `[email protected]` and higher, and `[email protected]` and higher.
 
-One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this:
+One way to add SVG files was described in the section above, but you need to add `?url` as query string to import it as URL. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this:
 
 ```js
-import { ReactComponent as Logo } from './logo.svg';
+import Logo from './logo.svg';
+import logo from './logo.svg?url';
 
 function App() {
   return (
     <div>
       {/* Logo is an actual React component */}
       <Logo />
+      {/* logo as url */}
+      <img src={logo} alt="logo" />
     </div>
   );
 }
 ```
 
-This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The `ReactComponent` import name is significant and tells Create React App that you want a React component that renders an SVG, rather than its filename.
+This is handy if you don't want to load SVG as a separate file.
 
 > **Tip:** The imported SVG React Component accepts a `title` prop along with other props that a `svg` element accepts. Use this prop to add an accessible title to your svg component.

packages/babel-plugin-named-asset-import/index.test.js

@@ -8,7 +8,7 @@ pluginTester.default({
   pluginOptions: {
     loaderMap: {
       svg: {
-        ReactComponent: '@svgr/webpack?-svgo![path]',
+        ReactComponent: '[path]',
       },
     },
   },
@@ -28,24 +28,24 @@ pluginTester.default({
       output: 'import { Url as logo1 } from "logo";',
     },
     svgDefaultImport: {
-      code: 'import logo from "logo.svg";',
-      output: 'import logo from "logo.svg";',
+      code: 'import Logo from "logo.svg";',
+      output: 'import Logo from "logo.svg";',
     },
     svgNamedImport: {
       code: 'import { logo } from "logo.svg";',
       output: 'import { logo } from "logo.svg";',
     },
     svgReactComponentNamedImport: {
-      code: 'import { ReactComponent as logo } from "logo.svg";',
-      output:
-        'import { ReactComponent as logo } from "@svgr/webpack?-svgo!logo.svg";',
+      code: 'import { ReactComponent as Logo } from "logo.svg";',
+      output: 'import { ReactComponent as Logo } from "logo.svg";',
     },
     svgMultipleImport: {
-      code: 'import logo, { logoUrl , ReactComponent as Logo } from "logo.svg";',
+      code:
+        'import logoUrl from "logo.svg?url";\n' +
+        'import Logo from "logo.svg";',
       output:
-        'import logo from "logo.svg";\n' +
-        'import { logoUrl } from "logo.svg";\n' +
-        'import { ReactComponent as Logo } from "@svgr/webpack?-svgo!logo.svg";',
+        'import logoUrl from "logo.svg?url";\n' +
+        'import Logo from "logo.svg";',
     },
     defaultExport: {
       code: 'export default logo;',
@@ -81,18 +81,19 @@ pluginTester.default({
     },
     svgReactComponentNamedExport: {
       code: 'export { ReactComponent as Logo } from "logo.svg";',
-      output:
-        'export { ReactComponent as Logo } from "@svgr/webpack?-svgo!logo.svg";',
+      output: 'export { ReactComponent as Logo } from "logo.svg";',
     },
     svgReactComponentExport: {
       code: 'export { ReactComponent } from "logo.svg";',
-      output: 'export { ReactComponent } from "@svgr/webpack?-svgo!logo.svg";',
+      output: 'export { ReactComponent } from "logo.svg";',
     },
     svgMultipleExport: {
-      code: 'export { logoUrl , ReactComponent as Logo } from "logo.svg";',
+      code:
+        'export { logoUrl } from "logo.svg?url";\n' +
+        'export { ReactComponent as Logo } from "logo.svg";',
       output:
-        'export { logoUrl } from "logo.svg";\n' +
-        'export { ReactComponent as Logo } from "@svgr/webpack?-svgo!logo.svg";',
+        'export { logoUrl } from "logo.svg?url";\n' +
+        'export { ReactComponent as Logo } from "logo.svg";',
     },
   },
 });

packages/cra-template-typescript/template/src/App.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import logo from './logo.svg';
+import Logo from './logo.svg';
 import './App.css';
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+        <Logo className="App-logo" title="logo" />
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>

packages/cra-template/template/src/App.js

@@ -1,11 +1,11 @@
-import logo from './logo.svg';
+import Logo from './logo.svg';
 import './App.css';
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+        <Logo className="App-logo" title="logo" />
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>

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

@@ -16,7 +16,7 @@ module.exports = {
       const pascalCaseFilename = camelcase(path.parse(filename).name, {
         pascalCase: true,
       });
-      const componentName = `Svg${pascalCaseFilename}`;
+      const componentName = `${pascalCaseFilename}`;
       return `const React = require('react');
       module.exports = {
         __esModule: true,

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

@@ -386,30 +386,31 @@ module.exports = function (webpackEnv) {
               },
             },
             {
-              test: /\.svg$/,
-              use: [
-                {
-                  loader: require.resolve('@svgr/webpack'),
-                  options: {
-                    prettier: false,
-                    svgo: false,
-                    svgoConfig: {
-                      plugins: [{ removeViewBox: false }],
-                    },
-                    titleProp: true,
-                    ref: true,
-                  },
-                },
-                {
-                  loader: require.resolve('file-loader'),
-                  options: {
-                    name: 'static/media/[name].[hash].[ext]',
-                  },
-                },
-              ],
+              test: /\.svg$/i,
+              issuer: {
+                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+              },
+              type: 'asset',
+              resourceQuery: /url/, // *.svg?url
+            },
+            {
+              test: /\.svg$/i,
               issuer: {
                 and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
               },
+              resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+              use: {
+                loader: require.resolve('@svgr/webpack'),
+                options: {
+                  prettier: false,
+                  svgo: false,
+                  svgoConfig: {
+                    plugins: [{ removeViewBox: false }],
+                  },
+                  titleProp: true,
+                  ref: true,
+                },
+              },
             },
             // Process application JS with Babel.
             // The preset includes JSX, Flow, TypeScript, and some ESnext features.

packages/react-scripts/fixtures/kitchensink/template/integration/webpack.test.js

@@ -117,9 +117,7 @@ describe('Integration', () => {
 
     it('svg inclusion', async () => {
       doc = await initDOM('svg-inclusion');
-      expect(doc.getElementById('feature-svg-inclusion').src).toMatch(
-        /\/static\/media\/logo\..+\.svg$/
-      );
+      expect(doc.getElementById('feature-svg-inclusion').src).toBeDefined();
     });
 
     it('svg component', async () => {

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

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { ReactComponent as Logo } from './assets/logo.svg';
+import Logo from './assets/logo.svg';
 
 const SvgComponent = () => {
   return <Logo id="feature-svg-component" />;

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

@@ -13,14 +13,16 @@ describe('svg component', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(<SvgComponent />, div);
-    expect(div.textContent).toBe('logo.svg');
+    expect(div.innerHTML).toBe(
+      '<logo.svg id="feature-svg-component"></logo.svg>'
+    );
   });
 
   it('svg root element equals the passed ref', () => {
     const div = document.createElement('div');
     const someRef = React.createRef();
     ReactDOM.render(<SvgComponentWithRef ref={someRef} />, div);
-    const svgElement = div.getElementsByTagName('svg');
+    const svgElement = div.getElementsByTagName('logo.svg');
     expect(svgElement).toHaveLength(1);
     expect(svgElement[0]).toBe(someRef.current);
   });

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/assets/svg.css

@@ -1,3 +1,3 @@
 #feature-svg-in-css {
-  background-image: url('./logo.svg');
+  background-image: url('./logo.svg?url');
 }