diff --git a/e2e/cases/assets/raw/index.test.ts b/e2e/cases/assets/raw-query/index.test.ts similarity index 65% rename from e2e/cases/assets/raw/index.test.ts rename to e2e/cases/assets/raw-query/index.test.ts index ec5c5a9e0c..df8abbbd8b 100644 --- a/e2e/cases/assets/raw/index.test.ts +++ b/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(); +}); diff --git a/e2e/cases/assets/raw/src/index.js b/e2e/cases/assets/raw-query/src/index.js similarity index 100% rename from e2e/cases/assets/raw/src/index.js rename to e2e/cases/assets/raw-query/src/index.js diff --git a/packages/core/src/configChain.ts b/packages/core/src/configChain.ts index f442284003..4cf62ce4a9 100644 --- a/packages/core/src/configChain.ts +++ b/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', diff --git a/packages/plugin-svgr/src/index.ts b/packages/plugin-svgr/src/index.ts index 4c8ac41012..34ab480177 100644 --- a/packages/plugin-svgr/src/index.ts +++ b/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) diff --git a/packages/plugin-svgr/tests/__snapshots__/index.test.ts.snap b/packages/plugin-svgr/tests/__snapshots__/index.test.ts.snap index 3d0fdc13ff..87825a8743 100644 --- a/packages/plugin-svgr/tests/__snapshots__/index.test.ts.snap +++ b/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",