diff --git a/docs/guide/advanced/aliased-names.md b/docs/guide/advanced/aliased-names.md new file mode 100644 index 000000000..7a24f9349 --- /dev/null +++ b/docs/guide/advanced/aliased-names.md @@ -0,0 +1,25 @@ +# Aliased Names + +Icons can have multiple names for the same icon. This is because we choose to rename some icons to make them more consistent with the rest of the icon set, or the name was not generic. For example, the `edit-2` icon is renamed to `pen` to make the name more generic, since it is just a pen icon. + +Beside aliases names lucide also includes prefixed and suffixed names to use within your project. This is to prevent import name collisions with other libraries or your own code. + +```tsx +// These are all the same icon +import { + Home, + HomeIcon, + LucideHome, +} from "lucide-react"; +``` + + +## Choosing import name style + + + +```ts +declare module "lucide-react" { + export * from "lucide-react/dist/lucide-react.prefixed"; +} +``` diff --git a/packages/lucide-react/rollup.config.mjs b/packages/lucide-react/rollup.config.mjs index e4a153f13..b985822ed 100644 --- a/packages/lucide-react/rollup.config.mjs +++ b/packages/lucide-react/rollup.config.mjs @@ -98,5 +98,12 @@ export default [ }], plugins: [dts()], }, + { + input: 'src/lucide-react.prefixed.ts', + output: [{ + file: `dist/lucide-react.prefixed.d.ts`, format: "es" + }], + plugins: [dts()], + }, ...configs ]; diff --git a/packages/lucide-react/src/lucide-react.prefixed.ts b/packages/lucide-react/src/lucide-react.prefixed.ts new file mode 100644 index 000000000..9b6b207c9 --- /dev/null +++ b/packages/lucide-react/src/lucide-react.prefixed.ts @@ -0,0 +1,8 @@ +export * as icons from './icons'; +export * from './aliases'; +export { + default as createLucideIcon, + type IconNode, + type LucideProps, + type LucideIcon, +} from './createLucideIcon'; diff --git a/packages/lucide-react/src/lucide-react.suffixed.ts b/packages/lucide-react/src/lucide-react.suffixed.ts new file mode 100644 index 000000000..9b6b207c9 --- /dev/null +++ b/packages/lucide-react/src/lucide-react.suffixed.ts @@ -0,0 +1,8 @@ +export * as icons from './icons'; +export * from './aliases'; +export { + default as createLucideIcon, + type IconNode, + type LucideProps, + type LucideIcon, +} from './createLucideIcon';