> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# SVG support

By default, Re.Pack's [Assets loader](/api/loaders/assets-loader.md) is configured to allow you to import SVGs in your 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 these 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 Rspack (or webpack) **not to use** Re.Pack's [Assets loader](/api/loaders/assets-loader.md) from processing SVGs, since you will process them manually later.

Go to your Rspack/webpack configuration file and apply the following diff:

```diff
      {
        test: Repack.getAssetExtensionsRegExp(
-         Repack.ASSET_EXTENSIONS
+         Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg')
        ),
        use: {
          loader: '@callstack/repack/assets-loader',
```

:::tip

If you don't have Re.Pack's Assets loader rule in your Rspack/webpack config, read [this guide](/api/loaders/assets-loader.md#example) first.

:::

Now you need to tell Rspack/webpack how to handle `.svg` files.

## Using `@svgr/webpack`

Using [SVGR](https://react-svgr.com/) is a good option, if you want to render imported SVGs in the
same way as you would render any other React component:

```js
import * as React from "react";
import DeveloperActivitySvg from "./undraw_Developer_activity_re_39tg.svg";

export function MyComponent() {
  return <DeveloperActivitySvg width="100%" height="400" />;
}
```

### Setup

To use SVGR, you need to add an additional rule to process SVGs with `@svgr/webpack` loader.

Go to your Rspack/webpack configuration and apply the following diff:

```diff title="rspack.config.js"
module.exports = {
  // ...
  module: {
    // ...
    rules: [
      // ...
+     {
+       test: /\.svg$/,
+       use: [
+         {
+           loader: '@svgr/webpack',
+           options: {
+             native: true,
+             // You might want to uncomment the following line.
+             // More info: https://react-svgr.com/docs/options/#dimensions
+             // dimensions: false,
+           },
+         },
+       ],
+     },
    ],
    // ...
  },
  // ...
};
```

Thanks to the rule above, your SVGs will be processed by `@svgr/webpack` and converted to components
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 asset modules

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 Rspack/webpack's asset modules [here](https://rspack.rs/guide/features/asset-module).

:::

### `SvgXml` + `asset/source`

The SVG file will be included in a bundle as a raw source in a separate module.

```js
import * as React from "react";
import { SvgXml } from "react-native-svg";
import developerActivitySvgXml from "./undraw_Developer_activity_re_39tg.svg";

export function MyComponent() {
  return <SvgXml xml={developerActivitySvgXml} width="100%" height="400" />;
}
```

### `SvgUri` + `asset/inline`

The SVG file will be included in a bundle as a data URI in a separate module.

```js
import * as React from "react";
import { SvgUri } from "react-native-svg";
import developerActivitySvgUri from "./undraw_Developer_activity_re_39tg.svg";

export function MyComponent() {
  return <SvgUri uri={developerActivitySvgUri} width="100%" height="400" />;
}
```

### Setup

To use asset modules, you need to add additional rule to process SVGs as an asset module.

Go to your Rspack/webpack configuration and apply the following diff:

```diff title="rspack.config.js"
module.exports = {
  // ...
  module: {
    // ...
    rules: [
      // ...
+     {
+       test: /\.svg$/,
+       type: 'asset/source', // or `asset/inline`
+     },
    ],
    // ...
  },
  // ...
};
```

Now you can import the XML of your SVG in your code and render it using `SvgXml` from [`react-native-svg`](https://github.com/react-native-svg/react-native-svg) or `SvgUri` if you chose `asset/inline` type.

:::info

If you want to inline SVGs as data URI, use `asset/inline` in the rule:

```js
{
  test: /\.svg$/,
  type: 'asset/inline',
},
```

Remember to use `SvgUri` for inlined SVGs instead of `SvgXml`.

:::

You can also use both, `asset/source` and `asset/inline` in your application:

```diff title="rspack.config.cjs"
module.exports = {
  // ...
  module: {
    // ...
    rules: [
      // ...
+     {
+       test: /\.svg$/,
+       include: /assets\/source\//,
+       type: 'asset/source',
+     },
+     {
+       test: /\.svg$/,
+       include: /assets\/inline\//,
+       type: 'asset/inline',
+     },
    ],
    // ...
  },
  // ...
};
```

:::tip

When using both `asset/source` and `asset/inline`, you can specify different `test`, `include` and `exclude` values,
so that Rspack/webpack can figure out which mechanism to use for which SVG. You can read more about rule conditions here:

- [Condition](https://rspack.rs/config/module-rules#condition)
- [Rule.include](https://rspack.rs/config/module-rules#rulesinclude)
- [Rule.exclude](https://rspack.rs/config/module-rules#rulesexclude)
- [Rule.test](https://rspack.rs/config/module-rules#rulestest)

:::

:::warning

Do not use `asset/resource` type, as it won't work correctly in React Native and can potentially
crash your application.

:::