import * as Icon from "@ant-design/icons";
import React from "react";
function leftTab() {
const iconToElement = (name: string) =>
React.createElement(Icon && (Icon as any)[name], {
style: { fontSize: "17px" },
});
const tabList = [
{
icon: "HomeOutlined",
name: "大模型子站",
},
{
icon: "HomeOutlined",
name: "关注",
},
{
icon: "HomeOutlined",
name: "综合",
},
{
icon: "HomeOutlined",
name: "后端",
},
{
icon: "HomeOutlined",
name: "前端",
},
{
icon: "HomeOutlined",
name: "Android",
},
{
icon: "HomeOutlined",
name: "iOS",
},
{
icon: "HomeOutlined",
name: "人工智能",
},
{
icon: "HomeOutlined",
name: "开发工具",
},
{
icon: "HomeOutlined",
name: "代码人生",
},
{
icon: "HomeOutlined",
name: "阅读",
},
{
icon: "HomeOutlined",
name: "排行榜",
},
];
return (
<>
<div className="tabs_all_content">
{tabList.map((item, index) => {
return (
<div className="tabs_items" key={index}>
<div className="icon">{iconToElement(item.icon)}</div>
<div className="left_name">{item.name}</div>
</div>
);
})}
</div>
</>
);
}
export default leftTab;
react中动态渲染antd的icon
最新推荐文章于 2024-08-16 09:00:58 发布
本文介绍了一个React函数组件,它利用@ant-design/icons库中的HomeOutlined图标,展示了一个包含多种技术分类的左侧导航栏,如前端、后端、移动应用等。
摘要由CSDN通过智能技术生成