New Dynamic Icon Component (lucide-react)
This is an easier approach than the previous dynamicIconImports we exported in the library. This one supports all environments.
We removed the examples in the docs of how you can make a dynamic icon yourself with a dedicated DynamicIcon component.
This one fetches the icon data itself and renders it instead of fetching the Icon component from the library.
This makes it more flexible with all the frontend frameworks and libraries that exist for React.
🚨
Not recommended for regular applications that work fine with the regular static icon components.
Using the dynamic icon component increases build time, separate bundles, and separate network requests for each icon.
How to use
DynamicIcon is useful for applications that want to show icons dynamically by icon name, for example when using a content management system where icon names are stored in a database.
const App = () => (
<DynamicIcon name="camera" color="red" size={48} />
);Possible Breaking changes
We have switched to the "exports" property in package.json. This can cause issues if you have directly imported scripts from the package. Please open an issue if we need to refine this export map.