fix(plugin-svgr): support for raw query

e2e/cases/assets/raw/index.test.ts → e2e/cases/assets/raw-query/index.test.ts

@@ -2,6 +2,7 @@ import { promises } from 'node:fs';
 import { join } from 'node:path';
 import { build, dev } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
+import { pluginSvgr } from '@rsbuild/plugin-svgr';
 
 test('should allow to get raw asset content with `?raw` in development mode', async ({
   page,
@@ -38,3 +39,24 @@ test('should allow to get raw asset content with `?raw` in production mode', asy
 
   await rsbuild.close();
 });
+
+test('should allow to get raw SVG content with `?raw` when using pluginSvgr', async ({
+  page,
+}) => {
+  const rsbuild = await dev({
+    cwd: __dirname,
+    page,
+    rsbuildConfig: {
+      plugins: [pluginSvgr()],
+    },
+  });
+
+  expect(await page.evaluate('window.rawImg')).toEqual(
+    await promises.readFile(
+      join(__dirname, '../../../assets/circle.svg'),
+      'utf-8',
+    ),
+  );
+
+  await rsbuild.close();
+});

packages/core/src/configChain.ts

@@ -85,6 +85,7 @@ export const CHAIN_ID = {
   /** Predefined rule groups */
   ONE_OF: {
     SVG: 'svg',
+    SVG_RAW: 'svg-asset-raw',
     SVG_URL: 'svg-asset-url',
     SVG_ASSET: 'svg-asset',
     SVG_REACT: 'svg-react',

packages/plugin-svgr/src/index.ts

@@ -166,19 +166,27 @@ export const pluginSvgr = (options: PluginSvgrOptions = {}): RsbuildPlugin => ({
 
       svgrOptions.svgoConfig = dedupeSvgoPlugins(svgrOptions.svgoConfig);
 
-      // force to url: "foo.svg?url",
+      // get asset URL: "foo.svg?url" or "foo.svg?__inline=false"
       rule
         .oneOf(CHAIN_ID.ONE_OF.SVG_URL)
         .type('asset/resource')
         .resourceQuery(/(__inline=false|url)/)
         .set('generator', generatorOptions);
 
-      // force to inline: "foo.svg?inline"
+      // get inlined base64 content: "foo.svg?inline"
       rule
         .oneOf(CHAIN_ID.ONE_OF.SVG_INLINE)
         .type('asset/inline')
         .resourceQuery(/inline/);
 
+      // get raw content: "foo.svg?raw"
+      if (CHAIN_ID.ONE_OF.SVG_RAW) {
+        rule
+          .oneOf(CHAIN_ID.ONE_OF.SVG_RAW)
+          .type('asset/source')
+          .resourceQuery(/raw/);
+      }
+
       // force to react component: "foo.svg?react"
       rule
         .oneOf(CHAIN_ID.ONE_OF.SVG_REACT)

packages/plugin-svgr/tests/__snapshots__/index.test.ts.snap

@@ -14,6 +14,10 @@ exports[`svgr > 'configure SVGR options' 1`] = `
       "resourceQuery": /inline/,
       "type": "asset/inline",
     },
+    {
+      "resourceQuery": /raw/,
+      "type": "asset/source",
+    },
     {
       "resourceQuery": /react/,
       "type": "javascript/auto",
@@ -107,6 +111,10 @@ exports[`svgr > 'exportType default / mixedImport false' 1`] = `
       "resourceQuery": /inline/,
       "type": "asset/inline",
     },
+    {
+      "resourceQuery": /raw/,
+      "type": "asset/source",
+    },
     {
       "resourceQuery": /react/,
       "type": "javascript/auto",
@@ -264,6 +272,10 @@ exports[`svgr > 'exportType default / mixedImport true' 1`] = `
       "resourceQuery": /inline/,
       "type": "asset/inline",
     },
+    {
+      "resourceQuery": /raw/,
+      "type": "asset/source",
+    },
     {
       "resourceQuery": /react/,
       "type": "javascript/auto",
@@ -421,6 +433,10 @@ exports[`svgr > 'exportType named / mixedImport false' 1`] = `
       "resourceQuery": /inline/,
       "type": "asset/inline",
     },
+    {
+      "resourceQuery": /raw/,
+      "type": "asset/source",
+    },
     {
       "resourceQuery": /react/,
       "type": "javascript/auto",
@@ -578,6 +594,10 @@ exports[`svgr > 'exportType named / mixedImport true' 1`] = `
       "resourceQuery": /inline/,
       "type": "asset/inline",
     },
+    {
+      "resourceQuery": /raw/,
+      "type": "asset/source",
+    },
     {
       "resourceQuery": /react/,
       "type": "javascript/auto",