react antd的关于图标两个小问题

最新推荐文章于 2025-05-02 20:47:59 发布

鬼手FixYou

最新推荐文章于 2025-05-02 20:47:59 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 antd4 文章标签： react js

本文链接：https://blog.youkuaiyun.com/fupingfuping/article/details/108119198

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

antd4

1 篇文章

订阅专栏

本文介绍如何使用Ant Design的图标组件，通过封装组件实现动态显示图标，以及如何将iconfont资源本地化，解决内网环境下图标加载问题。涵盖组件封装、属性传递、本地资源加载等关键技术点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据后台菜单返回的icon字段生成antd icon

先封装成一个组件，根据传入的props icon参数来显示对象的Icon

import React from "react";
import * as Icon from "@ant-design/icons";
const MyIcon = (props) => {
    return (
        React.createElement(
            Icon[props.icon],
            {
                style: {fontSize: '16px'}
            }
        )
    )
};
export default MyIcon;

具体调用的地方例子如下：

 <MyIcon icon={item.icon}/>

item就是后台返回的单个菜单信息，icon就是对应的图标名
举例：某个菜单项

 {
        title: "首页",
        path: "/home",
        icon: "MessageOutlined",
    },

将iconfont.cn 的资源下载到本地，使用createFromIconfontCN 来使用本地资源，解决内网使用iconfont.cn 字体的问题

先把js下载到本地，如图：
js路径
把路径显示的js下载到本地，并放到项目的public文件夹下，
再参照如下demo使用

import React from "react";
import {createFromIconfontCN} from "@ant-design/icons";

const IconFont = createFromIconfontCN({
    scriptUrl: [
        'font.js',//修改成自己的图标文件名
    ],
});

const Home2 = () => {
    return (
        <div className="icons-list">
            <IconFont type="iconconfig"/>
            <IconFont type="iconadd_1"/>
        </div>
    )
};

export default Home2;