docs(plugin-svgr): add react query guide (#1786)

.changeset/little-ways-hunt.md

@@ -0,0 +1,5 @@
+---
+'@rsbuild/document': patch
+---
+
+release: 0.4.14

packages/document/docs/en/plugins/list/plugin-svgr.mdx

@@ -32,22 +32,34 @@ export default {
 
 ## Example
 
-After installing the plugin, When import an SVG in a JS file, if you import `ReactComponent`, Rsbuild will call SVGR to convert the SVG into a React component.
+After installing the plugin, when import an SVG in a JS file, if the imported path contains the `?react` suffix, Rsbuild will call SVGR to convert the SVG into a React component.
 
-```js
-import { ReactComponent as Logo } from './logo.svg';
+```jsx title="App.jsx"
+import Logo from './logo.svg?react';
 
-export default () => <Logo />;
+export const App = () => <Logo />;
 ```
 
-At this time，if you use the default import, then the SVG will be treated as a normal static asset and you will get a URL:
+:::tip
+@rsbuild/plugin-svgr supports the above usage since v0.4.14.
+:::
+
+If the imported path does not contain the `?react` suffix, then the SVG will be treated as a normal static asset and you will get a URL:
 
 ```js
 import logoURL from './static/logo.svg';
 
 console.log(logoURL); // => "/static/logo.6c12aba3.png"
 ```
 
+Rsbuild also supports named imports of the `ReactComponent` to use SVGR:
+
+```jsx title="App.jsx"
+import { ReactComponent as Logo } from './logo.svg';
+
+export const App = () => <Logo />;
+```
+
 ## Options
 
 If you need to customize the compilation behavior of Svgr, you can use the following configs.
@@ -156,6 +168,11 @@ TS2307: Cannot find module './logo.svg' or its corresponding type declarations.
 To fix this, you need to add a type declaration file for the SVG asset, please create a `src/env.d.ts` file, and add the following type declaration:
 
 ```ts
+declare module '*.svg?react' {
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
+
 declare module '*.svg' {
   export const ReactComponent: React.FunctionComponent<
     React.SVGProps<SVGSVGElement>

packages/document/docs/zh/plugins/list/plugin-svgr.mdx

@@ -32,22 +32,34 @@ export default {
 
 ## 示例
 
-安装完插件后，当你在 **JS 文件**中引用 SVG 资源时，如果你具名导入 ReactComponent 对象，Rsbuild 会调用 SVGR，将 SVG 图片转换为一个 React 组件。
+安装完插件后，当你在 **JS 文件**中引用 SVG 资源时，如果导入的路径包含 `?react` 后缀，，Rsbuild 会调用 SVGR，将 SVG 图片转换为一个 React 组件。
 
-```js
-import { ReactComponent as Logo } from './logo.svg';
+```jsx title="App.jsx"
+import Logo from './logo.svg?react';
 
-export default () => <Logo />;
+export const App = () => <Logo />;
 ```
 
-此时，如果你使用默认导入，那么 SVG 会被当做普通的静态资源来处理，你会得到一个 URL 字符串：
+:::tip
+@rsbuild/plugin-svgr 从 0.4.14 版本开始支持上述用法。
+:::
+
+如果导入的路径不包含 `?react` 后缀，那么 SVG 会被当做普通的静态资源来处理，你会得到一个 URL 字符串：
 
 ```js
 import logoURL from './static/logo.svg';
 
 console.log(logoURL); // => "/static/logo.6c12aba3.png"
 ```
 
+Rsbuild 也支持具名导入 ReactComponent 来使用 SVGR：
+
+```jsx title="App.jsx"
+import { ReactComponent as Logo } from './logo.svg';
+
+export const App = () => <Logo />;
+```
+
 ## 选项
 
 如果你需要自定义 SVGR 的编译行为，可以使用以下配置项：
@@ -156,6 +168,11 @@ TS2307: Cannot find module './logo.svg' or its corresponding type declarations.
 此时你需要为 SVG 资源添加类型声明文件，请在项目中创建 `src/env.d.ts` 文件，并添加相应的类型声明：
 
 ```ts
+declare module '*.svg?react' {
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
+
 declare module '*.svg' {
   export const ReactComponent: React.FunctionComponent<
     React.SVGProps<SVGSVGElement>