Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 47 additions & 4 deletions website/pages/docs/next.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ yarn add --dev @svgr/webpack

## Usage

Using SVGR in Next.js is possible with `@svgr/webpack`.
Using SVGR in Next.js and older is possible with `@svgr/webpack`.

Webpack module example (Next.js 13.0.0):

**next.config.js**

Expand All @@ -43,6 +45,45 @@ const nextConfig: NextConfig = {
});
return config;
},
/* other config options here */
};

export default nextConfig;

```
Turbopack example for Next.js 13.0.0 - 15.2.x:

**next.config.js**

```js
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
experimental: {
turbo: {
rules: {
"*.svg": {
loaders: ["@svgr/webpack"],
as: "*.js",
}
}
}
}
/* other config options here */
};

export default nextConfig;

```

Using SVGR in Next.js ^15.3.0 Turbopack example.

**next.config.js**

```js
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
turbopack: {
rules: {
"*.svg": {
Expand All @@ -58,6 +99,8 @@ export default nextConfig;

```

More examples can be found in the [next.js: configuring webpack loaders](https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopack#configuring-webpack-loaders).

**Your code**

```js
Expand Down Expand Up @@ -89,9 +132,9 @@ Please refer to [SVGR webpack guide](/docs/webpack/) for advanced use cases.

Using SVGR with TypeScript support.

**Type decleration**
**Type declaration**

Add a custom type decleration file (e.g. **svgr.d.ts**) to the root of your repo.
Add a custom type declaration file (e.g. **svgr.d.ts**) to the root of your repo.

```ts
declare module '*.svg' {
Expand All @@ -108,7 +151,7 @@ declare module '*.svg?url' {

**tsconfig.json**

Add the type decleration file to your tsconfig.json's `include` array. **Ensure it's the first item.**
Add the type declaration file to your tsconfig.json's `include` array. **Ensure it's the first item.**

```json
{
Expand Down