feat(app-tools): add type for SVGR query usage

.changeset/fresh-cherries-whisper.md

@@ -0,0 +1,5 @@
+---
+'@modern-js/app-tools': patch
+---
+
+feat(app-tools): add type for SVGR query usage

packages/document/main-doc/docs/en/guides/basic-features/svg-assets.mdx

@@ -12,20 +12,36 @@ SVG stands for Scalable Vector Graphics. It is a type of image format that uses
 
 ## Import SVG in JS file
 
-When import an SVG in a JS file, if you import `ReactComponent`, Modern.js will call [SVGR](https://react-svgr.com/) to convert the SVG into a React component.
+### Default Import
+
+If you use the default import to reference SVG, it will be treated as a static asset and you will get a URL string:
 
 ```tsx title="src/component/Logo.tsx"
-import { ReactComponent as Logo } from './static/logo.svg';
+import logoURL from './static/logo.svg';
+
+console.log(logoURL); // => "/static/logo.6c12aba3.png"
+```
+
+### Transform to React Component
+
+When referencing SVG assets in JS files, if the import path includes the `?react` suffix, Modern.js will call SVGR to transform the SVG image into a React component:
+
+```tsx title="src/component/Logo.tsx"
+import Logo from './logo.svg?react';
 
 export default () => <Logo />;
 ```
 
-If you use the default import, then the SVG will be treated as a normal static asset and you will get a URL:
+:::tip
+Modern.js >= MAJOR_VERSION.48.3 version supports the above usage.
+:::
+
+Modern.js also supports the following usage, transforming SVG into a React component by named import `ReactComponent`:
 
 ```tsx title="src/component/Logo.tsx"
-import logoURL from './static/logo.svg';
+import { ReactComponent as Logo } from './static/logo.svg';
 
-console.log(logoURL); // => "/static/logo.6c12aba3.png"
+export default () => <Logo />;
 ```
 
 ## Modify the Default Export
@@ -95,6 +111,11 @@ declare module '*.svg' {
   const content: string;
   export default content;
 }
+
+declare module '*.svg?react' {
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
 ```
 
 If you set `svgDefaultExport` to `'component'`, then change the type declaration to:

packages/document/main-doc/docs/zh/guides/basic-features/svg-assets.mdx

@@ -12,20 +12,36 @@ SVG 是 Scalable Vector Graphics 的缩写，意为可伸缩矢量图形。SVG 
 
 ## 在 JS 文件中引用
 
-在 JS 文件中引用 SVG 资源时，如果你具名导入 `ReactComponent` 对象，Modern.js 会调用 [SVGR](https://react-svgr.com/)，将 SVG 图片转换为一个 React 组件。
+### 默认导入
+
+如果你使用默认导入来引用 SVG，它会被当做静态资源来处理，你会得到一个 URL 字符串：
 
 ```tsx title="src/component/Logo.tsx"
-import { ReactComponent as Logo } from './static/logo.svg';
+import logoURL from './static/logo.svg';
+
+console.log(logoURL); // => "/static/logo.6c12aba3.png"
+```
+
+### 转换 React 组件
+
+在 JS 文件中引用 SVG 资源时，如果导入的路径包含 `?react` 后缀，Modern.js 会调用 SVGR，将 SVG 图片转换为一个 React 组件：
+
+```tsx title="src/component/Logo.tsx"
+import Logo from './logo.svg?react';
 
 export default () => <Logo />;
 ```
 
-如果你使用默认导入，那么 SVG 会被当做普通的静态资源来处理，你会得到一个 URL 字符串：
+:::tip
+Modern.js >= MAJOR_VERSION.48.3 版本支持上述用法。
+:::
+
+Modern.js 也支持以下用法，通过具名导入 `ReactComponent` 来转换 SVG 为 React 组件：
 
 ```tsx title="src/component/Logo.tsx"
-import logoURL from './static/logo.svg';
+import { ReactComponent as Logo } from './static/logo.svg';
 
-console.log(logoURL); // => "/static/logo.6c12aba3.png"
+export default () => <Logo />;
 ```
 
 ## 修改默认导出
@@ -97,6 +113,11 @@ declare module '*.svg' {
   const content: string;
   export default content;
 }
+
+declare module '*.svg?react' {
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
 ```
 
 如果你将 `svgDefaultExport` 设置为 `'component'`，则将类型声明修改为：

packages/solutions/app-tools/lib/types.d.ts

@@ -61,6 +61,11 @@ declare module '*.svg' {
   export default content;
 }
 
+declare module '*.svg?react' {
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
+
 declare module '*.bmp?inline' {
   const src: string;
   export default src;