You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -30,6 +30,8 @@ For custom CSS Modules configuration.
30
30
31
31
Set the size threshold to inline static assets such as images and fonts.
32
32
33
+
When [format](/config/lib/format) is set to `cjs` or `esm`, Rslib defaults to setting `output.dataUriLimit` to `0`, without inlining any static assets, so that build tools on the application side can handle and optimize them.
In Bundle mode, JSON files support both default and named imports.
28
-
In Bundleless mode, JSON files only support named imports.
29
-
30
-
:::
31
-
32
33
### Named import
33
34
34
-
Rslib also supports referencing JSON files through named imports:
35
+
Rslib also supports importing JSON files through named import.
35
36
36
37
Here is an example, assuming the source code is as follows:
37
38
@@ -59,25 +60,25 @@ console.log(name); // 'foo';
59
60
</Tab>
60
61
</Tabs>
61
62
62
-
Based on the configuration in the [output structure](/guide/basic/output-structure) specified in the configuration file, the following outputs will be packaged:
63
+
Based on the configuration in the [output structure](/guide/basic/output-structure) specified in the configuration file, the following outputs will be emitted:
When the [format](/config/lib/format) is set to `cjs` or `esm`, Rslib treats the output as an mid-level artifact that will be consumed by other build tools again. During the code transformation, Rslib transforms the source file into a JS file and a static asset file that is output according to [output.distPath](/config/rsbuild/output#outputdistpath), which is used to preserve the `import` statements for static assets.
39
+
When the [format](/config/lib/format) is set to `cjs` or `esm`, Rslib treats the output as an mid-level artifact that will be consumed by other build tools again and transforms the source file into a JS file and a static asset file that is emitted according to [output.distPath](/config/rsbuild/output#outputdistpath) by default, which is used to preserve the `import` statements for static assets.
40
40
41
41
The following is an example of usage, assuming the source code is as follows:
42
42
@@ -57,10 +57,10 @@ console.log(logo);
57
57
</Tab>
58
58
</Tabs>
59
59
60
-
Based on the configuration in the [output structure](/guide/basic/output-structure) in the configuration file, the following outputs will be packaged:
60
+
Based on the configuration in the [output structure](/guide/basic/output-structure) in the configuration file, the following outputs will be emitted:
@@ -123,7 +123,7 @@ Import with **alias** are also supported:
123
123
}
124
124
```
125
125
126
-
When the [format](/config/lib/format) is `cjs` or `esm`, Rslib treats the output as an intermediate product that will be consumed again by other packaging tools. Rslib preserves relative reference paths in CSS outputs by setting [output.assetPrefix](/config/rsbuild/output#outputassetprefix) to `"auto"`.
126
+
When the [format](/config/lib/format) is set to `cjs` or `esm`, Rslib treats the output as an mid-level artifact that will be consumed by other build tools again and preserves relative reference paths in CSS outputs by default via setting [output.assetPrefix](/config/rsbuild/output#outputassetprefix) to `"auto"`.
127
127
128
128
The following is an example of usage, assuming the source code is as follows:
129
129
@@ -147,7 +147,7 @@ The following is an example of usage, assuming the source code is as follows:
147
147
</Tab>
148
148
</Tabs>
149
149
150
-
The following output will be packaged:
150
+
The following output will be emitted:
151
151
152
152
<Tabs>
153
153
@@ -185,7 +185,7 @@ If you need to import a static asset with an absolute path in a CSS file:
185
185
}
186
186
```
187
187
188
-
By default, the built-in `css-loader` in Rslib will resolve absolute paths in `url()` and look for the specified modules. If you want to skip resolving absolute paths, you can configure [`tools.cssLoader`](/config/rsbuild/tools#toolscssloader) to filter out the specified paths. The filtered paths are left as they are in the code.
188
+
By default, the built-in `css-loader` in Rslib will resolve absolute paths in `url()` and look for the specified modules. If you want to skip resolving absolute paths, you can configure [`tools.cssLoader`](/config/rsbuild/tools#toolscssloader) to filter out the specified paths. The filtered paths are preserved as they are in the code.
189
189
190
190
```ts
191
191
exportdefault {
@@ -206,16 +206,14 @@ export default {
206
206
207
207
## Inline static assets
208
208
209
-
When developing libraries that will be consumed again by other build tools as intermediate products, static assets are typically not inlined, leaving the handling and optimization to the build tools on the application side.
210
-
211
-
The automatic inlining size threshold can be modified via the [output.dataUriLimit](/config/rsbuild/output#outputdataurilimit) configuration option. When the [format](/config/lib/format) is `cjs` or `esm`, Rslib defaults the `output.dataUriLimit` to `0`, not inlining any static assets.
209
+
When the [format](/config/lib/format) is set to `cjs` or `esm`, Rslib treats the output as an mid-level artifact that will be consumed by other build tools again and sets [output.dataUriLimit](/config/rsbuild/output#outputdataurilimit) to `0` by default to not inline any static assets.
212
210
213
211
## Build output directory
214
212
215
-
Once static assets are referenced, they will automatically be output to the build output directory. You can:
213
+
Once static assets are imported, they will automatically be output to the build output directory. You can:
216
214
217
-
- Modify the filename of the output through [output.filename](/config/rsbuild/output#outputfilename).
218
-
- Change the output path of the product through [output.distPath](/config/rsbuild/output#outputdistpath).
215
+
- Modify the filename of the outputs through [output.filename](/config/rsbuild/output#outputfilename).
216
+
- Change the output path of the outputs through [output.distPath](/config/rsbuild/output#outputdistpath).
219
217
220
218
## Type declaration
221
219
@@ -282,7 +280,7 @@ export default {
282
280
addRules([
283
281
{
284
282
test:/\.pdf$/,
285
-
//将资源转换为单独的文件，并且保留 import 语句
283
+
//Convert assets to separate files and keep import statements
Copy file name to clipboardexpand all lines: website/docs/en/guide/advanced/svgr-files.mdx
+9-9
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
By default, Rslib treats SVG images as static assets.
4
4
5
-
By adding the [@rsbuild/plugin-svgr](https://rsbuild.dev/plugins/list/plugin-svgr) plugin, Rslib supports invoking [SVGR](https://react-svgr.com/) to convert SVG images into React components for use.
5
+
By adding the [@rsbuild/plugin-svgr](https://rsbuild.dev/plugins/list/plugin-svgr) plugin, Rslib supports transforming SVG to React components via [SVGR](https://react-svgr.com/).
6
6
7
7
## Quick start
8
8
@@ -30,7 +30,7 @@ export default {
30
30
31
31
### Bundle mode
32
32
33
-
In Bundle mode, all usages supported by the [Rsbuild SVGR plugin](https://rsbuild.dev/plugins/list/plugin-svgr) are available. The only difference is that when using an SVG file in URL form, Rslib will retain the `import` statement for the static asset in the output according to [Referencing Static Assets](/guide/advanced/static-assets).
33
+
In bundle mode, all usages supported by [@rsbuild/plugin-svgr](https://rsbuild.dev/plugins/list/plugin-svgr) are available in Rslib. The only difference is that when using an SVG file in URL form, Rslib will retain the `import` statement for the static asset in the output according to [Import static assets](/guide/advanced/static-assets).
34
34
35
35
Here is an example of usage:
36
36
@@ -50,14 +50,14 @@ import logoURL from './static/logo.svg';
50
50
console.log(logoURL);
51
51
```
52
52
53
-
`@rsbuild/plugin-svgr` also supports default imports and mixed imports:
53
+
`@rsbuild/plugin-svgr` also supports default import and mixed import:
54
54
55
-
- Enable default imports by setting [svgrOptions.exportType](https://rsbuild.dev/plugins/list/plugin-svgr#svgroptionsexporttype) to `'default'`.
56
-
- Enable mixed imports through the [mixedImport](https://rsbuild.dev/plugins/list/plugin-svgr#mixedimport) option to use both default and named imports.
55
+
- Enable default import by setting [svgrOptions.exportType](https://rsbuild.dev/plugins/list/plugin-svgr#svgroptionsexporttype) to `'default'`.
56
+
- Enable mixed import through the [mixedImport](https://rsbuild.dev/plugins/list/plugin-svgr#mixedimport) option to use both default and named import.
57
57
58
58
### Bundleless mode
59
59
60
-
In Bundleless mode, since each file undergoes code transformation independently, the import ways of `?react` and `?url` are not supported. However, the following two usage forms are supported:
60
+
In bundleless mode, since each file undergoes code transformation independently, the import ways of `?react` and `?url` are not supported. However, the following two usage forms are supported:
61
61
62
62
#### Named import
63
63
@@ -77,14 +77,14 @@ import { ReactComponent as Logo } from './logo.svg';
77
77
exportconstApp= () =><Logo />;
78
78
```
79
79
80
-
All `.svg` files will be converted into React components. At this time, you can:
80
+
All `.svg` files will be transformed into React components. At this time, you can:
81
81
82
-
- Exclude files that do not need to be converted by setting [exclude](https://rsbuild.dev/plugins/list/plugin-svgr#exclude).
82
+
- Exclude files that do not need to be transformed by setting [exclude](https://rsbuild.dev/plugins/list/plugin-svgr#exclude).
83
83
- Change to default export by setting [svgrOptions.exportType](https://rsbuild.dev/plugins/list/plugin-svgr#svgroptionsexporttype) to `'default'`.
84
84
85
85
#### Mixed import
86
86
87
-
If your library has both URL and React component import forms for SVG files, you can also use mixed imports.
87
+
If your library has both URL and React component import forms for SVG files, you can also use mixed import.
0 commit comments