hipowered.dev/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2026-11-13 13:48:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

add info about dynamic imports to nextjs docs (#1564)

Browse Source 
* add info about dynamic imports to nextjs docs

* remove warning
This commit is contained in:
Jan
2023-10-17 21:25:49 +02:00
committed by GitHub
parent 1e4fd13852
commit c5cfbed28c
2 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/guide/packages/lucide-react.md
+15 -3
View File
@@ -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.
@@ -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'
packages/lucide-react/README.md
+15 -3
View File
@@ -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.
@@ -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'