diff --git a/e2e/cases/plugin-svgr/import-attributes-text/index.test.ts b/e2e/cases/plugin-svgr/import-attributes-text/index.test.ts new file mode 100644 index 0000000000..9734b95679 --- /dev/null +++ b/e2e/cases/plugin-svgr/import-attributes-text/index.test.ts @@ -0,0 +1,14 @@ +import { readFileSync } from 'node:fs'; +import { join } from 'node:path'; +import { expect, test } from '@e2e/helper'; + +test('should import SVG as text with import attributes when using pluginSvgr', async ({ + page, + runBothServe, +}) => { + await runBothServe(async () => { + expect(await page.evaluate('window.svgText')).toBe( + readFileSync(join(import.meta.dirname, '../../../assets/circle.svg'), 'utf-8'), + ); + }); +}); diff --git a/e2e/cases/plugin-svgr/import-attributes-text/rsbuild.config.ts b/e2e/cases/plugin-svgr/import-attributes-text/rsbuild.config.ts new file mode 100644 index 0000000000..b67bb664dc --- /dev/null +++ b/e2e/cases/plugin-svgr/import-attributes-text/rsbuild.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from '@rsbuild/core'; +import { pluginSvgr } from '@rsbuild/plugin-svgr'; + +export default defineConfig({ + plugins: [pluginSvgr()], +}); diff --git a/e2e/cases/plugin-svgr/import-attributes-text/src/index.js b/e2e/cases/plugin-svgr/import-attributes-text/src/index.js new file mode 100644 index 0000000000..8afb2443dd --- /dev/null +++ b/e2e/cases/plugin-svgr/import-attributes-text/src/index.js @@ -0,0 +1,3 @@ +import svgText from '@e2e/assets/circle.svg' with { type: 'text' }; + +window.svgText = svgText; diff --git a/packages/core/src/configChain.ts b/packages/core/src/configChain.ts index 6342985e04..8577026585 100644 --- a/packages/core/src/configChain.ts +++ b/packages/core/src/configChain.ts @@ -77,6 +77,7 @@ export const CHAIN_ID = { /** SVG oneOf rules */ SVG: 'svg', SVG_RAW: 'svg-asset-raw', + SVG_TEXT: 'svg-asset-text', 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 eb3c7f4fb7..a488a4f04e 100644 --- a/packages/plugin-svgr/src/index.ts +++ b/packages/plugin-svgr/src/index.ts @@ -205,6 +205,11 @@ export const pluginSvgr = (options: PluginSvgrOptions = {}): RsbuildPlugin => ({ .type('asset/inline') .resourceQuery(/^\?inline$/); + // get SVG source: `import source from "foo.svg" with { type: "text" }` + if (CHAIN_ID.ONE_OF.SVG_TEXT) { + rule.oneOf(CHAIN_ID.ONE_OF.SVG_TEXT).type('asset/source').with({ type: 'text' }); + } + // get raw content: "foo.svg?raw" if (CHAIN_ID.ONE_OF.SVG_RAW) { rule diff --git a/packages/plugin-svgr/tests/__snapshots__/index.test.ts.snap b/packages/plugin-svgr/tests/__snapshots__/index.test.ts.snap index 231219693e..b7d2488882 100644 --- a/packages/plugin-svgr/tests/__snapshots__/index.test.ts.snap +++ b/packages/plugin-svgr/tests/__snapshots__/index.test.ts.snap @@ -14,6 +14,12 @@ exports[`svgr > configure SVGR options 1`] = ` "resourceQuery": /\\^\\\\\\?inline\\$/, "type": "asset/inline", }, + { + "type": "asset/source", + "with": { + "type": "text", + }, + }, { "resourceQuery": /\\^\\\\\\?raw\\$/, "type": "asset/source", @@ -116,6 +122,12 @@ exports[`svgr > exportType default / mixedImport false 1`] = ` "resourceQuery": /\\^\\\\\\?inline\\$/, "type": "asset/inline", }, + { + "type": "asset/source", + "with": { + "type": "text", + }, + }, { "resourceQuery": /\\^\\\\\\?raw\\$/, "type": "asset/source", @@ -287,6 +299,12 @@ exports[`svgr > exportType default / mixedImport true 1`] = ` "resourceQuery": /\\^\\\\\\?inline\\$/, "type": "asset/inline", }, + { + "type": "asset/source", + "with": { + "type": "text", + }, + }, { "resourceQuery": /\\^\\\\\\?raw\\$/, "type": "asset/source", @@ -458,6 +476,12 @@ exports[`svgr > exportType named / mixedImport false 1`] = ` "resourceQuery": /\\^\\\\\\?inline\\$/, "type": "asset/inline", }, + { + "type": "asset/source", + "with": { + "type": "text", + }, + }, { "resourceQuery": /\\^\\\\\\?raw\\$/, "type": "asset/source", @@ -629,6 +653,12 @@ exports[`svgr > exportType named / mixedImport true 1`] = ` "resourceQuery": /\\^\\\\\\?inline\\$/, "type": "asset/inline", }, + { + "type": "asset/source", + "with": { + "type": "text", + }, + }, { "resourceQuery": /\\^\\\\\\?raw\\$/, "type": "asset/source",