Appearance
Are you an LLM? You can read better optimized documentation at /guide/react/advanced/dynamic-icon-component.md for this page in Markdown format
动态图标组件
🌐 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} />
);警告
- 所有图标都在构建时导入,这会增加构建时间。
- 打包工具会为每个图标创建一个单独的模块,这可能会增加网络请求的数量。
- 在加载图标时可能会遇到闪烁,因为图标是动态加载的。
- 在使用服务器端渲染时,你需要确保图标在初始渲染期间可用。