feat: svgr fallback to file-loader when using big file

packages/bundler-webpack/compiled/file-loader/LICENSE

@@ -0,0 +1,20 @@
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/bundler-webpack/compiled/file-loader/package.json

@@ -0,0 +1 @@
+{"name":"file-loader","version":"6.2.0","author":"Tobias Koppers @sokra","license":"MIT"}

packages/bundler-webpack/package.json

@@ -63,6 +63,7 @@
     "copy-webpack-plugin": "10.2.4",
     "css-minimizer-webpack-plugin": "4.0.0",
     "cssnano": "5.1.7",
+    "file-loader": "6.2.0",
     "less-loader": "11.1.0",
     "mini-css-extract-plugin": "2.7.2",
     "postcss-flexbugs-fixes": "5.0.2",
@@ -115,6 +116,7 @@
       "terser",
       "terser-webpack-plugin",
       "url-loader",
+      "file-loader",
       "webpack-5-chain",
       "webpack-bundle-analyzer",
       "webpack-dev-middleware",
@@ -180,6 +182,7 @@
       "style-loader",
       "svgo-loader",
       "url-loader",
+      "file-loader",
       "webpack-bundle-analyzer",
       "webpack-dev-middleware",
       "webpack-manifest-plugin"

packages/bundler-webpack/src/config/assetRules.ts

@@ -12,7 +12,7 @@ interface IOpts {
 export async function addAssetRules(opts: IOpts) {
   const { config, userConfig } = opts;
 
-  const inlineLimit = parseInt(userConfig.inlineLimit || '10000', 10);
+  const inlineLimit = userConfig.inlineLimit;
   const rule = config.module.rule('asset');
 
   rule

packages/bundler-webpack/src/config/config.ts

@@ -63,6 +63,8 @@ export async function getConfig(opts: IOpts): Promise<Configuration> {
   const isDev = opts.env === Env.development;
   const config = new Config();
   userConfig.targets ||= DEFAULT_BROWSER_TARGETS;
+  // normalize inline limit
+  userConfig.inlineLimit = parseInt(userConfig.inlineLimit || '10000', 10);
   const useHash = !!(opts.hash || (userConfig.hash && !isDev));
   const applyOpts = {
     name: opts.name,

packages/bundler-webpack/src/config/svgRules.ts

@@ -42,6 +42,12 @@ export async function addSVGRules(opts: IOpts) {
       .end()
       .use('url-loader')
       .loader(require.resolve('@umijs/bundler-webpack/compiled/url-loader'))
+      .options({
+        limit: userConfig.inlineLimit,
+        fallback: require.resolve(
+          '@umijs/bundler-webpack/compiled/file-loader',
+        ),
+      })
       .end();
   }
   if (svgo !== false) {