replace babel-svg-loader with svgr+new-url-loader (#4595)

* replace babel-svg-loader with svgr+new-url-loader * move new-url-loader to react/component.json
teambit · Jul 18, 2021 · cf63c7e · cf63c7e
1 parent df672ab
commit cf63c7e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 26 deletions.
diff --git a/scopes/react/react/component.json b/scopes/react/react/component.json
@@ -27,6 +27,7 @@
           "eslint-plugin-react": "7.22.0",
           "eslint-plugin-jsx-a11y": "6.4.1",
           "eslint-plugin-mdx": "1.13.0",
+          "new-url-loader": "0.1.1",
           "react-app-polyfill": "1.0.6",
           "resolve-url-loader": "3.1.2",
           "@mdx-js/react": "1.6.22",

diff --git a/scopes/react/react/webpack/webpack.config.base.ts b/scopes/react/react/webpack/webpack.config.base.ts
@@ -135,18 +135,6 @@ export default function (isEnvProduction = false): Configuration {
                 configFile: false,
                 customize: require.resolve('babel-preset-react-app/webpack-overrides'),
                 presets: [require.resolve('@babel/preset-react')],
-                plugins: [
-                  [
-                    require.resolve('babel-plugin-named-asset-import'),
-                    {
-                      loaderMap: {
-                        svg: {
-                          ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
-                        },
-                      },
-                    },
-                  ],
-                ],
                 // This is a feature of `babel-loader` for webpack (not Babel itself).
                 // It enables caching results in ./node_modules/.cache/babel-loader/
                 // directory for faster rebuilds.
@@ -308,7 +296,21 @@ export default function (isEnvProduction = false): Configuration {
                 },
               },
             },
-
+            {
+              // loads svg as both inlineUrl and react component, like:
+              // import starUrl, { ReactComponent as StarIcon } from './star.svg';
+              // (remove when there is native support for both opitons from webpack5 / svgr)
+              test: /\.svg$/,
+              oneOf: [
+                {
+                  dependency: { not: ['url'] }, // exclude new URL calls
+                  use: [require.resolve('@svgr/webpack'), require.resolve('new-url-loader')],
+                },
+                {
+                  type: 'asset', // export a data URI or emit a separate file
+                },
+              ],
+            },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
             // In production, they would get copied to the `build` folder.

diff --git a/scopes/ui-foundation/ui/webpack/webpack.base.config.ts b/scopes/ui-foundation/ui/webpack/webpack.base.config.ts
@@ -155,7 +155,7 @@ export default function createWebpackConfig(
             // smaller than specified limit in bytes as data URLs to avoid requests.
             // A missing `test` is equivalent to a match.
             {
-              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
               type: 'asset',
               parser: {
                 dataUrlCondition: {
@@ -172,18 +172,6 @@ export default function createWebpackConfig(
                 babelrc: false,
                 configFile: false,
                 customize: require.resolve('babel-preset-react-app/webpack-overrides'),
-                plugins: [
-                  [
-                    require.resolve('babel-plugin-named-asset-import'),
-                    {
-                      loaderMap: {
-                        svg: {
-                          ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
-                        },
-                      },
-                    },
-                  ],
-                ],
                 // This is a feature of `babel-loader` for webpack (not Babel itself).
                 // It enables caching results in ./node_modules/.cache/babel-loader/
                 // directory for faster rebuilds.