refactor(plugin-svgr): use internal asset loader (#7482)

Author: chenjiahan

packages/plugin-svgr/package.json

@@ -17,13 +17,11 @@
   },
   "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    "compiled"
+    "dist"
   ],
   "scripts": {
     "build": "rslib",
-    "dev": "rslib -w",
-    "prebundle": "prebundle"
+    "dev": "rslib -w"
   },
   "dependencies": {
     "@rsbuild/plugin-react": "workspace:^2.0.0-rc.2",
@@ -39,11 +37,8 @@
     "@rslib/core": "0.21.0",
     "@scripts/test-helper": "workspace:*",
     "@types/node": "^24.12.2",
-    "file-loader": "6.2.0",
-    "prebundle": "1.6.4",
     "svgo": "^3.3.3",
-    "typescript": "^6.0.2",
-    "url-loader": "4.1.1"
+    "typescript": "^6.0.2"
   },
   "peerDependencies": {
     "@rsbuild/core": "^2.0.0-0"

packages/plugin-svgr/prebundle.config.ts

@@ -8,6 +8,7 @@ export default defineConfig({
     {
       source: {
         entry: {
+          assetLoader: './src/assetLoader.ts',
           loader: './src/loader.ts',
         },
       },

packages/plugin-svgr/rslib.config.ts

@@ -0,0 +1,61 @@
+import path from 'node:path';
+import type { Rspack } from '@rsbuild/core';
+import { interpolateName } from 'loader-utils';
+
+type FilenameTemplate =
+  | string
+  | ((resourcePath: string, resourceQuery?: string) => string);
+
+export type SvgAssetLoaderOptions = {
+  limit: number;
+  name: FilenameTemplate;
+};
+
+type RawLoaderDefinition<OptionsType = {}> = ((
+  this: Rspack.LoaderContext<OptionsType>,
+  content: Buffer,
+) => string | Buffer | void | Promise<string | Buffer | void>) & {
+  raw: true;
+};
+
+const SVG_MIME_TYPE = 'image/svg+xml';
+const HASH_TEMPLATE_REGEX = /\[(?:[^:\]]+:)?(?:hash|contenthash)(?::[^\]]+)?]/i;
+
+const normalizePath = (value: string) => value.replace(/\\/g, '/');
+
+const assetLoader: RawLoaderDefinition<SvgAssetLoaderOptions> = function (
+  content,
+) {
+  const { limit, name } = this.getOptions();
+
+  if (content.length <= limit) {
+    const dataUrl = `data:${SVG_MIME_TYPE};base64,${content.toString('base64')}`;
+    return `export default ${JSON.stringify(dataUrl)}`;
+  }
+
+  const filename = interpolateName(this, name, {
+    context: this.rootContext,
+    content,
+  });
+
+  const assetInfo: {
+    immutable?: true;
+    sourceFilename: string;
+  } = {
+    sourceFilename: normalizePath(
+      path.relative(this.rootContext, this.resourcePath),
+    ),
+  };
+
+  if (typeof name === 'string' && HASH_TEMPLATE_REGEX.test(name)) {
+    assetInfo.immutable = true;
+  }
+
+  this.emitFile(filename, content, undefined, assetInfo);
+
+  return `export default __webpack_public_path__ + ${JSON.stringify(filename)};`;
+};
+
+assetLoader.raw = true;
+
+export default assetLoader;

packages/plugin-svgr/src/assetLoader.ts

@@ -256,7 +256,7 @@ export const pluginSvgr = (options: PluginSvgrOptions = {}): RsbuildPlugin => ({
         if (mixedImport && exportType === 'named') {
           svgRule
             .use(CHAIN_ID.USE.URL)
-            .loader(path.join(__dirname, '../compiled', 'url-loader/index.js'))
+            .loader(path.resolve(__dirname, './assetLoader.mjs'))
             .options({
               limit: maxSize,
               name: generatorOptions?.filename,

packages/plugin-svgr/src/index.ts

@@ -0,0 +1,10 @@
+declare module 'loader-utils' {
+  export function interpolateName(
+    loaderContext: unknown,
+    name?: string | ((resourcePath: string, resourceQuery?: string) => string),
+    options?: {
+      context?: string;
+      content?: Buffer;
+    },
+  ): string;
+}

packages/plugin-svgr/src/loader-utils.d.ts

@@ -769,7 +769,7 @@ exports[`svgr > exportType named / mixedImport true 1`] = `
           },
         },
         {
-          "loader": "<ROOT>/packages/plugin-svgr/compiled/url-loader/index.js",
+          "loader": "<ROOT>/packages/plugin-svgr/src/assetLoader.mjs",
           "options": {
             "limit": 4096,
             "name": "static/svg/[name].[contenthash:10].svg",