diff --git a/docs/guide/packages/lucide-react.md b/docs/guide/packages/lucide-react.md index b049abcc4..047fcea49 100644 --- a/docs/guide/packages/lucide-react.md +++ b/docs/guide/packages/lucide-react.md @@ -138,7 +138,8 @@ In NextJS [the dynamic function](https://nextjs.org/docs/pages/building-your-app ```tsx import dynamic from 'next/dynamic' -import { dynamicIconImports, LucideProps } from 'lucide-react'; +import { LucideProps } from 'lucide-react'; +import dynamicIconImports from 'lucide-react/dynamicIconImports'; interface IconProps extends LucideProps { name: keyof typeof dynamicIconImports; diff --git a/packages/lucide-react/README.md b/packages/lucide-react/README.md index 557801446..36da825fa 100644 --- a/packages/lucide-react/README.md +++ b/packages/lucide-react/README.md @@ -112,7 +112,8 @@ In NextJS [the dynamic function](https://nextjs.org/docs/pages/building-your-app ```tsx import dynamic from 'next/dynamic' -import { dynamicIconImports, LucideProps } from 'lucide-react'; +import { LucideProps } from 'lucide-react'; +import dynamicIconImports from 'lucide-react/dynamicIconImports'; interface IconProps extends LucideProps { name: keyof typeof dynamicIconImports; diff --git a/packages/lucide-react/package.json b/packages/lucide-react/package.json index 7d13398dc..66b58bd81 100644 --- a/packages/lucide-react/package.json +++ b/packages/lucide-react/package.json @@ -10,8 +10,29 @@ "url": "https://github.com/lucide-icons/lucide.git", "directory": "packages/lucide-react" }, + "type": "module", "author": "Eric Fennis", "amdName": "lucide-react", + "exports": { + ".": { + "import": "./dist/esm/lucide-react.mjs", + "require": "./dist/cjs/lucide-react.cjs", + "types": "./dist/lucide-react.d.ts" + }, + "./icons": { + "import": "./dist/esm/icons/index.mjs", + "require": "./dist/cjs/lucide-react.cjs" + }, + "./dynamicIconImports": { + "import": "./dist/esm/dynamicIconImports.mjs", + "types": "./dist/dynamicIconImports.d.ts" + } + }, + "typesVersions": { + "*": { + "dynamicIconImports": ["./dist/dynamicIconImports.d.ts"] + } + }, "main": "dist/cjs/lucide-react.js", "main:umd": "dist/umd/lucide-react.js", "module": "dist/esm/lucide-react.js", diff --git a/packages/lucide-react/rollup.config.mjs b/packages/lucide-react/rollup.config.mjs index 3294d258a..baa475743 100644 --- a/packages/lucide-react/rollup.config.mjs +++ b/packages/lucide-react/rollup.config.mjs @@ -9,34 +9,39 @@ const inputs = [`src/lucide-react.ts`]; const bundles = [ { format: 'umd', + extension: 'js', inputs, outputDir, minify: true, }, { format: 'umd', + extension: 'js', inputs, outputDir, }, { format: 'cjs', + extension: 'cjs', inputs, outputDir, aliasesSupport: true, - withDynamicImports: true, }, { format: 'esm', - inputs, + extension: 'mjs', + inputs: [ + ...inputs, + 'src/dynamicIconImports.ts', + ], outputDir, preserveModules: true, aliasesSupport: true, - withDynamicImports: true, }, ]; const configs = bundles - .map(({ inputs, outputDir, format, minify, preserveModules, aliasesSupport, withDynamicImports }) => + .map(({ inputs, outputDir, format, minify, preserveModules, aliasesSupport, extension }) => inputs.map(input => ({ input, plugins: [ @@ -50,15 +55,6 @@ const configs = bundles }), ] : [] ), - ...( - !withDynamicImports ? [ - replace({ - "export { default as dynamicIconImports } from './dynamicIconImports';": '', - delimiters: ['', ''], - preventAssignment: false, - }), - ] : [] - ), ...plugins(pkg, minify) ], external: ['react', 'prop-types'], @@ -67,9 +63,10 @@ const configs = bundles ...(preserveModules ? { dir: `${outputDir}/${format}`, + entryFileNames: `[name].${extension}`, } : { - file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`, + file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.${extension}`, }), format, sourcemap: true, @@ -84,6 +81,13 @@ const configs = bundles .flat(); export default [ + { + input: 'src/dynamicIconImports.ts', + output: [{ + file: `dist/dynamicIconImports.d.ts`, format: "es" + }], + plugins: [dts()], + }, { input: inputs[0], output: [{ diff --git a/packages/lucide-react/src/lucide-react.ts b/packages/lucide-react/src/lucide-react.ts index 25abd4159..a02411498 100644 --- a/packages/lucide-react/src/lucide-react.ts +++ b/packages/lucide-react/src/lucide-react.ts @@ -1,7 +1,6 @@ export * from './icons'; export * as icons from './icons'; export * from './aliases'; -export { default as dynamicIconImports } from './dynamicIconImports'; export { default as createLucideIcon, type IconNode, diff --git a/packages/lucide-react/tests/lucide-react.spec.tsx b/packages/lucide-react/tests/lucide-react.spec.tsx index b9524245f..46f023ae6 100644 --- a/packages/lucide-react/tests/lucide-react.spec.tsx +++ b/packages/lucide-react/tests/lucide-react.spec.tsx @@ -1,7 +1,8 @@ import { describe, it, expect } from 'vitest'; import { render, cleanup, waitFor } from '@testing-library/react' -import { Pen, Edit2, Grid, dynamicIconImports, LucideProps } from '../src/lucide-react'; +import { Pen, Edit2, Grid, LucideProps } from '../src/lucide-react'; import { Suspense, lazy } from 'react'; +import dynamicIconImports from '../src/dynamicIconImports'; describe('Using lucide icon components', () => { it('should render an component', () => {