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
Copy file name to clipboardexpand all lines: website/docs/en/guide/advanced/static-assets.mdx
+1-1
Original file line number
Diff line number
Diff line change
@@ -210,7 +210,7 @@ When developing libraries that will be consumed again by other build tools as in
210
210
211
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.
212
212
213
-
## Build Output Directory
213
+
## Build output directory
214
214
215
215
Once static assets are referenced, they will automatically be output to the build output directory. You can:
Copy file name to clipboardexpand all lines: website/docs/en/guide/advanced/svgr-files.mdx
+7-7
Original file line number
Diff line number
Diff line change
@@ -4,17 +4,17 @@ By default, Rslib treats SVG images as static assets.
4
4
5
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.
6
6
7
-
## Quick Start
7
+
## Quick start
8
8
9
-
### Install the Plugin
9
+
### Install the plugin
10
10
11
11
You can install the plugin using the following command:
You can register the plugin in the `rslib.config.ts` file:
20
20
@@ -28,7 +28,7 @@ export default {
28
28
29
29
## Examples
30
30
31
-
### Bundle Mode
31
+
### Bundle mode
32
32
33
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).
34
34
@@ -55,11 +55,11 @@ console.log(logoURL);
55
55
- Enable default imports by setting [svgrOptions.exportType](https://rsbuild.dev/plugins/list/plugin-svgr#svgroptionsexporttype) to `'default'`.
56
56
- Enable mixed imports through the [mixedImport](https://rsbuild.dev/plugins/list/plugin-svgr#mixedimport) option to use both default and named imports.
57
57
58
-
### Bundleless Mode
58
+
### Bundleless mode
59
59
60
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
-
#### Named Import
62
+
#### Named import
63
63
64
64
`@rsbuild/plugin-svgr` supports named import of `ReactComponent` to use SVGR. You need to set [svgrOptions.exportType](https://rsbuild.dev/plugins/list/plugin-svgr#svgroptionsexporttype) to `'named'`.
65
65
@@ -82,7 +82,7 @@ All `.svg` files will be converted into React components. At this time, you can:
82
82
- Exclude files that do not need to be converted 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
-
#### Mixed Import
85
+
#### Mixed import
86
86
87
87
If your library has both URL and React component import forms for SVG files, you can also use mixed imports.
0 commit comments