From 8dad523186b716a5b4725e4c5cb28bcae2269ff2 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 21 Mar 2024 17:02:23 +0800 Subject: [PATCH] feat(app-tools): add type for SVGR query usage --- .changeset/fresh-cherries-whisper.md | 5 +++ .../en/guides/basic-features/svg-assets.mdx | 31 ++++++++++++++++--- .../zh/guides/basic-features/svg-assets.mdx | 31 ++++++++++++++++--- packages/solutions/app-tools/lib/types.d.ts | 5 +++ 4 files changed, 62 insertions(+), 10 deletions(-) create mode 100644 .changeset/fresh-cherries-whisper.md diff --git a/.changeset/fresh-cherries-whisper.md b/.changeset/fresh-cherries-whisper.md new file mode 100644 index 000000000000..244cb5c22811 --- /dev/null +++ b/.changeset/fresh-cherries-whisper.md @@ -0,0 +1,5 @@ +--- +'@modern-js/app-tools': patch +--- + +feat(app-tools): add type for SVGR query usage diff --git a/packages/document/main-doc/docs/en/guides/basic-features/svg-assets.mdx b/packages/document/main-doc/docs/en/guides/basic-features/svg-assets.mdx index cfafcc8e192b..c9258ec0b099 100644 --- a/packages/document/main-doc/docs/en/guides/basic-features/svg-assets.mdx +++ b/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 () => ; ``` -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 () => ; ``` ## 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>; + export default ReactComponent; +} ``` If you set `svgDefaultExport` to `'component'`, then change the type declaration to: diff --git a/packages/document/main-doc/docs/zh/guides/basic-features/svg-assets.mdx b/packages/document/main-doc/docs/zh/guides/basic-features/svg-assets.mdx index f93ce93ef063..31d3eb78502c 100644 --- a/packages/document/main-doc/docs/zh/guides/basic-features/svg-assets.mdx +++ b/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 () => ; ``` -如果你使用默认导入，那么 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 () => ; ``` ## 修改默认导出 @@ -97,6 +113,11 @@ declare module '*.svg' { const content: string; export default content; } + +declare module '*.svg?react' { + const ReactComponent: React.FunctionComponent>; + export default ReactComponent; +} ``` 如果你将 `svgDefaultExport` 设置为 `'component'`，则将类型声明修改为： diff --git a/packages/solutions/app-tools/lib/types.d.ts b/packages/solutions/app-tools/lib/types.d.ts index b6787741586b..b53e545f880a 100644 --- a/packages/solutions/app-tools/lib/types.d.ts +++ b/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>; + export default ReactComponent; +} + declare module '*.bmp?inline' { const src: string; export default src;