Skip to content

动态图标组件

🌐 Dynamic Icon Component

可以使用一个通用图标组件来加载图标。但不推荐这样做,因为它在构建过程中会导入所有图标。请参见 注意事项

🌐 It is possible to use one generic icon component to load icons. But it is not recommended, since it is importing all icons during the build. See Caveats.

DynamicIcon 对于希望通过图标名称动态显示图标的应用非常有用。例如,在使用图标名称存储在数据库中的内容管理系统时。

对于静态用例,建议直接导入图标。

🌐 For static use cases, it is recommended to import the icons directly.

相同的属性可以传递来调整图标的外观。name 属性是加载正确图标所必需的。

🌐 The same props can be passed to adjust the icon appearance. The name prop is required to load the correct icon.

jsx
import { DynamicIcon } from 'lucide-react/dynamic';

const App = () => (
  <DynamicIcon name="camera" color="red" size={48} />
);

警告

  • 所有图标都在构建时导入,这会增加构建时间。
  • 打包工具会为每个图标创建一个单独的模块,这可能会增加网络请求的数量。
  • 在加载图标时可能会遇到闪烁,因为图标是动态加载的。
  • 在使用服务器端渲染时,你需要确保图标在初始渲染期间可用。