Skip to content

Conversation

@ericfennis
Copy link
Member

@ericfennis ericfennis commented Jul 9, 2023

Closes #1373.
Closes #1420.

Improves Typescript types

Improves Typescript types export by switching to rollup-plugin-dts for types generation.

Added JS Docs

When hovering over a Lucide component you get a JSDoc comment with useful information about the Lucide Icons component. It also shows a small preview of the icons you imported with the link to the lucide website.
image

Dynamic Imports Map

Experimental Feature
This is icon dynamic import map of all the lucide components. Useful for application that want to show icons dynamically, usecase for this using a CMS to dynamically imports each icon.

Example with NextJS:

import dynamic from 'next/dynamic'
import { dynamicIconImports, LucideProps } from 'lucide-react';

interface IconProps extends LucideProps {
  name: keyof typeof dynamicIconImports;
}

const Icon = ({ name, color, size }: IconProps) => {
  const LucideIcon = dynamic(dynamicIconImports[name])

  return <LucideIcon color={color} size={size} />;
};

export default Icon;

@github-actions github-actions bot added 📦 dependencies Pull requests that update a dependency file ⚛️ react package Lucide React Package labels Jul 9, 2023
@jsaunders92
Copy link

Thank you for your hard work @ericfennis! I'm really looking forward to this pull request to be progressed as it just happens to be what I need.

@github-actions github-actions bot added 📖 documentation Improvements or additions to documentation 🌍 site Has to do something with the Lucide website labels Jul 13, 2023
@ericfennis
Copy link
Member Author

@jsaunders92 Thank you very much!
I needed to test it before I merged this, and it worked really nicely. You probably don't need the dynamic import version for the latest NextJS since it is streaming everything from the server. But it is nice to have some flexibility. For example, if you want to do client-side rendering. I've added the examples to the documentation.

@ericfennis ericfennis marked this pull request as ready for review July 13, 2023 14:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📦 dependencies Pull requests that update a dependency file 📖 documentation Improvements or additions to documentation ⚛️ react package Lucide React Package 🌍 site Has to do something with the Lucide website

Projects

None yet

Development

Successfully merging this pull request may close these issues.

lucide-react typing for LucideIcon is incorrect Issues creating a Icon wrapper component

2 participants