diff --git a/website/src/5.x/docs/guides/svg.md b/website/src/5.x/docs/guides/svg.md index 780c5d648..e28bd8e61 100644 --- a/website/src/5.x/docs/guides/svg.md +++ b/website/src/5.x/docs/guides/svg.md @@ -1,18 +1,18 @@ # SVG support -By default, Re.Pack's [Assets loader](../loaders/assets-loader) is configured to allow you to import SVGs in you code, but that doesn't mean you can render them immediately. +By default, Re.Pack's [Assets loader](../../api/loaders/assets-loader) is configured to allow you to import SVGs in you code, but that doesn't mean you can render them immediately. ## Pre-requisites To render SVGs in your application, you first need to add [`react-native-svg`](https://github.com/react-native-svg/react-native-svg) native module to your application. -Please follow this installation instructions here: https://github.com/react-native-svg/react-native-svg#installation +Please follow this installation instructions [here](https://github.com/react-native-svg/react-native-svg#installation). ## Exclude SVG from Re.Pack's Assets loader -Now that you have [`react-native-svg`](https://github.com/react-native-svg/react-native-svg) installed and linked into the application, you need to tell Webpack **not to use** Re.Pack's [Assets loader](../loaders/assets-loader) from processing SVGs, since you will process them manually later. +Now that you have [`react-native-svg`](https://github.com/react-native-svg/react-native-svg) installed and linked into the application, you need to tell Rspack (or webpack) **not to use** Re.Pack's [Assets loader](../loaders/assets-loader) from processing SVGs, since you will process them manually later. -Go to your Webpack configuration and apply the following diff: +Go to your Rspack/webpack configuration file and apply the following diff: ```diff { @@ -26,11 +26,11 @@ Go to your Webpack configuration and apply the following diff: :::tip -If you don't have Re.Pack's Assets loader rule in your Webpack config, read [this guide](../loaders/assets-loader#migrating-from-assetsplugin) first. +If you don't have Re.Pack's Assets loader rule in your Rspack/webpack config, read [this guide](../loaders/assets-loader#migrating-from-assetsplugin) first. ::: -Now you need to tell Webpack how to handle `.svg` files. +Now you need to tell Rspack/webpack how to handle `.svg` files. ## Using `@svgr/webpack` @@ -50,10 +50,9 @@ export function MyComponent() { To use SVGR, you need to add an additional rule to process SVGs with `@svgr/webpack` loader. -Go to your Webpack configuration and apply the following diff: +Go to your Rspack/webpack configuration and apply the following diff: -```diff -// webpack.config.js +```diff title="rspack.config.js" module.exports = { // ... module: { @@ -85,15 +84,15 @@ Thanks to the rule above, your SVGs will be processed by `@svgr/webpack` and con from [`react-native-svg`](https://github.com/react-native-svg/react-native-svg) allowing you to simply import the component and render it as a React component. -## Using Webpack's asset modules +## Using asset modules -Using Webpack's asset modules is a simpler and faster way to render SVGs in your application. +Using Rspack/webpack's asset modules is a simpler and faster way to render SVGs in your application. It's a good option, if you don't need or care about using the imported SVG as React component, and you're fine with using `SvgXml` or `SvgUri` component from [`react-native-svg`](https://github.com/react-native-svg/react-native-svg). :::info -You can read more about Webpack's asset modules here: https://webpack.js.org/guides/asset-modules/. +You can read more about Rspack/webpack's asset modules [here](https://rspack.dev/guide/features/asset-module). ::: @@ -129,10 +128,9 @@ export function MyComponent() { To use asset modules, you need to add additional rule to process SVGs as an asset module. -Go to your Webpack configuration and apply the following diff: +Go to your Rspack/webpack configuration and apply the following diff: -```diff -// webpack.config.js +```diff title="rspack.config.js" module.exports = { // ... module: { @@ -157,10 +155,10 @@ Now you can import the XML of your SVG in you code and render it using `SvgXml` If you want to inline SVGs as data URI, use `asset/inline` in the rule: ```js - { - test: /\.svg$/, - type: 'asset/inline', - }, +{ + test: /\.svg$/, + type: 'asset/inline', +}, ``` Remember to use `SvgUri` for inlined SVGs instead of `SvgXml`. @@ -169,8 +167,7 @@ Remember to use `SvgUri` for inlined SVGs instead of `SvgXml`. You can also use both, `asset/source` and `asset/inline` in your application: -```diff -// webpack.config.js +```diff title="rspack.config.cjs" module.exports = { // ... module: { @@ -197,13 +194,12 @@ module.exports = { :::tip When using both `assets/source` and `assets/inline`, you can specify different `test`, `include` and `exclude` values, -so that Webpack can figure out which mechanism to use for which SVG. You can read more about rule conditions here: +so that Rspack/webpack can figure out which mechanism to use for which SVG. You can read more about rule conditions here: -- https://webpack.js.org/configuration/module/#rule-conditions -- https://webpack.js.org/configuration/module/#ruleinclude -- https://webpack.js.org/configuration/module/#ruleexclude -- https://webpack.js.org/configuration/module/#ruletest -- https://webpack.js.org/configuration/module/#condition +- [Condition](https://rspack.dev/config/module#condition) +- [Rule.include](https://rspack.dev/config/module#ruleinclude) +- [Rule.exclude](https://rspack.dev/config/module#ruleexclude) +- [Rule.test](https://rspack.dev/config/module#ruletest) :::