[Bug]: SVG assets not preserve "import" when using "?url" via SVGR. #803
Description
Version
System:
OS: macOS 15.3
CPU: (8) arm64 Apple M1
Memory: 117.97 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Brave Browser: 131.1.73.105
Chrome: 133.0.6943.127
Safari: 18.3
npmPackages:
@rslib/core: ^0.5.2 => 0.5.2Details
when do I use "?url" for importing my svg icons, "LibSvgrPatchPlugin" does not add imports to my build.
Example:
SVGR plugin settings:
plugins: [
pluginSvgr({
svgrOptions: {
exportType: "default",
icon: true,
svgoConfig: {
plugins: [
{
name: "convertColors",
params: {
currentColor: true,
},
},
],
},
},
})],
Component:
import successIcon from "@smartfox/assets/icons/temp/toasticons/successIcon.svg?url";
import warningIcon from "@smartfox/assets/icons/temp/toasticons/warningIcon.svg?url";
...
const Toast = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
VariantProps<typeof toastVariants>
>(({ className, variant, children, ...props }, ref) => {
return (
<ToastPrimitives.Root
ref={ref}
className={clsx(toastVariants({ variant }), className)}
{...props}
>
{variant === "error" && <img src={warningIcon} alt="error icon" />}
{variant === "success" && <img src={successIcon} alt="success icon" />}
{children}
</ToastPrimitives.Root>
);
});
rslib.config.ts:
import { defineConfig } from "@rslib/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { pluginSass } from "@rsbuild/plugin-sass";
import { pluginSvgr } from "@rsbuild/plugin-svgr";
import { pluginBasicSsl } from "@rsbuild/plugin-basic-ssl";
export default defineConfig({
lib: [{ format: "esm", dts: { bundle: true }, autoExternal: true }],
source: {
entry: {
index: "./src/index.ts",
},
tsconfigPath: "./tsconfig.lib.json",
},
output: {
externals: ["react", "react-dom"],
cssModules: {
localIdentName: "[hash:base64:4]",
namedExport: true,
},
cleanDistPath: true,
target: "web",
},
plugins: [
pluginSvgr({
svgrOptions: {
exportType: "default",
icon: true,
svgoConfig: {
plugins: [
{
name: "convertColors",
params: {
currentColor: true,
},
},
],
},
},
}),
pluginBasicSsl(),
pluginReact(),
pluginSass({
sassLoaderOptions: {
sassOptions: {
silenceDeprecations: ["import"],
},
},
}),
],
});
Build file results (index.mjs):
const successIconurl_namespaceObject = __webpack_require__.p + "static/svg/successIcon.svg";
const warningIconurl_namespaceObject = __webpack_require__.p + "static/svg/warningIcon.svg";
...
const Toast = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.forwardRef(({ className, variant, children, ...props }, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_toast_5fd51b0f__.Root, {
ref: ref,
className: dist_clsx(toastVariants({
variant
}), className),
...props,
children: [
"error" === variant && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("img", {
src: warningIconurl_namespaceObject,
alt: "error icon"
}),
"success" === variant && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("img", {
src: successIconurl_namespaceObject,
alt: "success icon"
}),
children
]
}));
build sctructure:
the actual result:
in bundle we can see
const successIconurl_namespaceObject = __webpack_require__.p + "static/svg/successIcon.svg";
const warningIconurl_namespaceObject = __webpack_require__.p + "static/svg/warningIcon.svg";
expected result
in bundle we can see
import __rslib_svgr_url__0__ from "./static/svg/successIcon.svg";
import __rslib_svgr_url__1__ from "./static/svg/warningIcon.svg";
Reproduce link
https://codepen.io/Justineo/pen/yLbxxOR
Reproduce Steps
- add svgr plugin
- import svg asset via "?url"
- build lib
- check build code