diff --git a/packages/core/src/asset/assetConfig.ts b/packages/core/src/asset/assetConfig.ts index 32bf232b0..146c94454 100644 --- a/packages/core/src/asset/assetConfig.ts +++ b/packages/core/src/asset/assetConfig.ts @@ -117,10 +117,25 @@ const pluginLibAsset = ({ bundle }: { bundle: boolean }): RsbuildPlugin => ({ }); config.plugin(LibSvgrPatchPlugin.name).use(LibSvgrPatchPlugin, []); } - // 2. in bundleless, do not support queryImport - // remove issuer to make every svg asset is transformed by svgr-loader - if (!bundle) { - if (isUsingSvgr) { + + if (isUsingSvgr) { + // 2. in bundle, ?url should also be set importMode to preserve + if (bundle) { + const rule = config.module + .rule(CHAIN_ID.RULE.SVG) + .oneOf(CHAIN_ID.ONE_OF.SVG_URL); + const originalGeneratorOptions = rule.get('generator'); + + const generatorOptions = isUserSetPublicPath + ? originalGeneratorOptions + : { + ...originalGeneratorOptions, + importMode: 'preserve', + }; + rule.generator(generatorOptions); + } else { + // 3. in bundleless, do not support queryImport + // remove issuer to make every svg asset is transformed by svgr-loader const rule = config.module .rule(CHAIN_ID.RULE.SVG) .oneOf(CHAIN_ID.ONE_OF.SVG); diff --git a/tests/integration/asset/__snapshots__/index.test.ts.snap b/tests/integration/asset/__snapshots__/index.test.ts.snap index 00bc501a9..351cb7dc7 100644 --- a/tests/integration/asset/__snapshots__/index.test.ts.snap +++ b/tests/integration/asset/__snapshots__/index.test.ts.snap @@ -288,7 +288,9 @@ const SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_r }) }); const logoreact = SvgLogo; +import logourl_namespaceObject from "./static/svg/logo.svg"; console.log('queryImport', 'ReactComponent', logoreact); +console.log('queryImport', 'Url', logourl_namespaceObject); const logo_SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 841.9 595.3", @@ -312,7 +314,7 @@ const logo_SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_ }); const logo = __rslib_svgr_url__0__; console.log('namedImport', 'ReactComponent', logo_SvgLogo); -console.log('default Import', 'reexport', logo); +console.log('defaultImport', 'Url', logo); " `; @@ -343,7 +345,9 @@ const SvgLogo = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg }) }); const logoreact = SvgLogo; +const logourl_namespaceObject = require("./static/svg/logo.svg"); console.log('queryImport', 'ReactComponent', logoreact); +console.log('queryImport', 'Url', logourl_namespaceObject); const logo_SvgLogo = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 841.9 595.3", @@ -367,7 +371,7 @@ const logo_SvgLogo = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx) }); const logo = require("./static/svg/logo.svg"); console.log('namedImport', 'ReactComponent', logo_SvgLogo); -console.log('default Import', 'reexport', logo); +console.log('defaultImport', 'Url', logo); var __webpack_export_target__ = exports; for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__]; if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', { diff --git a/tests/integration/asset/svgr/src/defaultImport.js b/tests/integration/asset/svgr/src/defaultImport.js index 57504f1b6..753571526 100644 --- a/tests/integration/asset/svgr/src/defaultImport.js +++ b/tests/integration/asset/svgr/src/defaultImport.js @@ -1,3 +1,3 @@ -import svgUrl from './assets/logo.svg'; +import Url from './assets/logo.svg'; -console.log('default Import', 'reexport', svgUrl); +console.log('defaultImport', 'Url', Url); diff --git a/tests/integration/asset/svgr/src/queryImport.js b/tests/integration/asset/svgr/src/queryImport.js index 3cdc85828..cdbbe7c0d 100644 --- a/tests/integration/asset/svgr/src/queryImport.js +++ b/tests/integration/asset/svgr/src/queryImport.js @@ -1,3 +1,5 @@ import ReactComponent from './assets/logo.svg?react'; +import Url from './assets/logo.svg?url'; console.log('queryImport', 'ReactComponent', ReactComponent); +console.log('queryImport', 'Url', Url);