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

根据后台菜单返回的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下载到本地，并放到项目的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;

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

React+Antd+TypeScript 开发规范
React+Antd+TypeScript 规范整合 1.TypeScript代码标准化规则提取出部分适用于项目中的官方要求的的TypeScript用于约束贡献者的编码规范 [typescript官 ...
如何在React中引入阿里图标库的图标
一.周所周知在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接这里module moduleResolution的配置都会影 ...
解决任务栏卡死的两个小技巧
最近WIN10更新之后,今天任务栏突然无故卡死,陷入"假死"状态,即任务栏不能点击,或者点击之后出现读条的圆圈,而桌面上的其他图标可以正常点击的现象.经过网上查阅资料,给出下述两种 ...
使用ASP.NET MVC 2编程时遇到的两个小问题
使用MVC2开发一个web应用的时候,遇到两个小问题,这里做下记录: (1) 通过ADO.NET Entity Data Model设计数据库结构的时候,一般情况下,如果想使我们新添加或修改的内容生效 ...
计算机配置文章,看电脑配置的“两个”小妙招!
原标题:看电脑配置的"两个"小妙招! 我们常说电脑配高配置低还是怎么怎么样,对于很多使用电脑的人来说他们并不知道这是指什么,也不明确配置高低是如何看的.今天小编就跟大家科普一下电脑 ...
信号与系统奥本海姆第二版_【中山大学电通信通信号与系统考研】自编的两张小卡片带大家整理一下《奥本海姆·信号与系统》的知识架构...
建议有时间的同学看看以下的视频,讲解的比文章详细些. [中山大学信号与系统考研]<奥本海姆·信号与系统>教材读不下去?抓不住重点?自编的两张小卡片带大家整理一下知识架构.考研的,本科学习的 ...
SourceTree 的初次使用的两个小问题
菜鸟才开始使用SourceTree,出现了两个小问题,特此整理一下,希望对各位新手有帮助.刚开始以为装了SourceTree就不用装git了,其实不然,不装git就会出现下面第一个问题: 1.新手使用 ...
URL处理两个小工具方法
文章出处:http://blog.csdn.net/ronanlin/archive/2006/08/30/1143090.aspx 有的时候我们要操作一个URL地址中查询参数,为了不破坏URL的原有 ...

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

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

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

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

最新文章

热门文章