react学习之antd
antd
为 Web 应用提供了丰富的基础 UI 组件,我们还将持续探索企业级应用的最佳 UI 实践。它最初是基于 React 的组件库,但随着技术的发展,现在也提供了基于 Vue.js 的版本——Antd Vue。无论你是 React 还是 Vue 的开发者,都可以利用 Antd 来丰富你的 Web 应用界面。
常见问题
React 中动态引入 Ant Design 图标
在 React 项目中,你可以通过 React.createElement 方法将图标字符串转换为图标组件。首先,你需要引入所有的 Ant Design 图标:
import * as Icons from '@ant-design/icons';
const Iconfont = (props) => {
const { icon } = props;
return React.createElement(Icons[icon]);
}
<Iconfont icon="HomeOutlined" />
扩展
在vue中想要把字符串编程图标,如果操作?
在 Vue 项目中,你可以通过 createVNode 方法将图标字符串转换为图标组件。首先,你需要引入所有的 Ant Design 图标:
import * as Icons from '@ant-design/icons-vue';
const Icon = (props) => {
const { icon } = props;
return createVNode(Icons[icon as keyof typeof Icons]);
}
<Icon icon="HomeOutlined" />
本文来自博客园,作者:柯南小海盗,转载请注明原文链接:https://www.cnblogs.com/knxhd/p/18646926
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 普通人也能轻松掌握的20个DeepSeek高频提示词(2025版)