Skip to content

Commit

Permalink
add info about dynamic imports to nextjs docs (#1564)
Browse files Browse the repository at this point in the history
* add info about dynamic imports to nextjs docs

* remove warning
  • Loading branch information
JanTrichter authored Oct 17, 2023
1 parent 1e4fd13 commit c5cfbed
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 6 deletions.
18 changes: 15 additions & 3 deletions docs/guide/packages/lucide-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,6 @@ export default App;

#### With Dynamic Imports

> :warning: This is experimental and only works with bundlers that support dynamic imports.
Lucide react exports a dynamic import map `dynamicIconImports`, which is useful for applications that want to show icons dynamically by icon name. For example, when using a content management system with where icon names are stored in a database.

When using client side rendering, it will fetch the icon component when it's needed. This will reduce the initial bundle size.
Expand Down Expand Up @@ -134,7 +132,21 @@ export default Icon

##### NextJS Example

In NextJS [the dynamic function](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) can be used to load the icon component dynamically.
In NextJS, [the dynamic function](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) can be used to dynamically load the icon component.

To make dynamic imports work with NextJS, you need to add `lucide-react` to the [`transpilePackages`](https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages) option in your `next.config.js` like this:

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ['lucide-react'] // add this
}

module.exports = nextConfig

```

You can then start using it:

```tsx
import dynamic from 'next/dynamic'
Expand Down
18 changes: 15 additions & 3 deletions packages/lucide-react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,6 @@ export default Icon;

#### With Dynamic Imports

> :warning: This is experimental and only works with bundlers that support dynamic imports.
Lucide react exports a dynamic import map `dynamicIconImports`. Useful for applications that want to show icons dynamically by icon name. For example when using a content management system with where icon names are stored in a database.

When using client side rendering, it will fetch the icon component when it's needed. This will reduce the initial bundle size.
Expand Down Expand Up @@ -108,7 +106,21 @@ export default Icon

##### NextJS Example

In NextJS [the dynamic function](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) can be used to load the icon component dynamically.
In NextJS, [the dynamic function](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) can be used to dynamically load the icon component.

To make dynamic imports work with NextJS, you need to add `lucide-react` to the [`transpilePackages`](https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages) option in your `next.config.js` like this:

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ['lucide-react'] // add this
}

module.exports = nextConfig

```

You can then start using it:

```tsx
import dynamic from 'next/dynamic'
Expand Down

0 comments on commit c5cfbed

Please sign in to comment.