react学习之antd

antd 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。它最初是基于 React 的组件库，但随着技术的发展，现在也提供了基于 Vue.js 的版本——Antd Vue。无论你是 React 还是 Vue 的开发者，都可以利用 Antd 来丰富你的 Web 应用界面。

常见问题

React 中动态引入 Ant Design 图标

在 React 项目中，你可以通过 React.createElement 方法将图标字符串转换为图标组件。首先，你需要引入所有的 Ant Design 图标：

1. import * as Icons from '@ant-design/icons';
3. const Iconfont = (props) => {
4.   const { icon } = props;
5.   return React.createElement(Icons[icon]);
6. }
8. <Iconfont icon="HomeOutlined" />

复制代码

扩展

在vue中想要把字符串编程图标，如果操作?

在 Vue 项目中，你可以通过 createVNode 方法将图标字符串转换为图标组件。首先，你需要引入所有的 Ant Design 图标：

1. import * as Icons from '@ant-design/icons-vue';
3. const Icon = (props) => {
4.   const { icon } = props;
5.   return createVNode(Icons[icon as keyof typeof Icons]);
6. }
8. <Icon icon="HomeOutlined" />

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！