react中使用antd按需加载及图标的使用

最新推荐文章于 2023-02-08 21:03:23 发布
最新推荐文章于 2023-02-08 21:03:23 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： react 文章标签： antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my466879168/article/details/109165219
版权

antd按需加载

antd按需加载首先需要安装antd
npm install antd --save
而需要使用antd图标的时候则需要安装npm install --save @ant-design/icons
安装按需加载包
npm install babel-plugin-import --save--dev
然后再webpack.config.js中添加下面代码：

[
  "import",
  {libraryName:"antd",style:"css"}
]

位置在：

香荣如梦
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd图标库按需加载的插件实现
福禄网络研发团队的博客
07-06 637
前景概要 antd是阿里出品的一款基于antd的UI组件库，使用简单，功能丰富，被广泛应用在中台项目开发中，虽然也出现了彩蛋事故，但不能否认antd本身的优秀，而我们公司在实际工作中也大量使用antd进行开发，使用的版本主要集中在3.x这个大版本中，在实际使用过程中发现了一个比较明显的问题，那就是antd的图标输出打包体积过大，即便是使用了一个图标，也会将所有图标打包输出，没有按需加载(...
react按需引入antd,修改antd样式主题
FleshyAPP的博客
10-05 968
react按需引入antd,修改antd样式主题
react: 动态设置ant-design/icons图标
mosowe
04-19 7430
antd 版本：V4 @ant-design/icons 版本： V4 在此版本中，icon的图标模式为标签形式，不像element那样可以通过改变class而改变icon的图标样式。 在我使用umijs开发后端管理系统时候，需要用到动态的icon图标，系统配置的时候只会传递icon的标签名称，比如正常的图标标签为：<PlusCircleFilled />，系统存的是PlusCircleFilled string类型，我需要在页面上显示对应的图标。 1.创建一个icon.ts文件，内容如下： i
react+antd项目引用阿里图标
White_Poppy的博客
06-28 2935
1.首先进入阿里图标首页, 搜索你想要的icon 2.选中图标，点击购物车的那个图标后，图标变成 3.点击右上角的购物车，将图标添加到已有的项目或新建项目 4.进入自己的项目，可以看到自己刚加的和以前加的图标 5.在自己的项目中新建一个js文件，我一般把它放到工具包的文件夹下,文件名自定义（例如：‘icon.js’），代码如下： import { createFromIconfontCN } from '@ant-design/icons'; const IconFont = createFro
React从ant-design图标库中动态加载图标
qq_43271423的博客
02-08 949
React从ant-design/icons图标库中动态加载图标，这样可以减少代码量，减少import语句的书写
react调用antd4.X自定义图标 icon | 阿里巴巴矢量图标
this_zq的博客
05-07 473
1 先贴图 2 看官网代码 https://ant.design/components/icon-cn/#components-icon-demo-custom 使用 iconfont.cn，使用多个和单个是异曲同工之处。那里的scriptUrl是生成的一个远程链接，我们在react里面调用它即可。 3 看这篇博客 https://blog.csdn.net/weixin_44021270/article/details/107377658 4 解决阿里巴巴矢量图标自定义更改后无法引用问题 当我
21 React UI框架Antd(Ant Design)的使用 以及react Antd的使用 组件
最新发布
03-01
同时，Antd支持按需引入，避免了加载不必要的代码，有助于优化性能。总的来说，Antd是React开发者构建企业级应用的强大工具，其丰富的组件库和优雅的设计风格，使得开发者可以更加专注于业务逻辑，而不是UI细节。
antd-desktop:使用antd的React桌面UI
03-29
在React开发领域，Ant Design（简称antd）是一个广泛使用的组件库，它提供了丰富...通过学习和使用这个模板库，开发者不仅可以掌握React和antd的使用，还能深入了解如何在TypeScript环境中优化项目结构和提升开发体验。
react-基于antdmobile的react项目模版
08-15
在实际使用过程中，开发者需要根据自己的需求，调整项目配置，添加或修改组件，实现特定的业务逻辑。 总之，这个"react-antd-mobile"项目模板是React和Ant Design Mobile结合的实例，它为开发者提供了一个良好的...
react 通过小眼睛 控制密码显示与隐藏
04-11
本篇文章将深入探讨如何在React应用中实现这一功能，并结合实际代码示例进行详细讲解。 首先，我们需要理解React组件的基本结构。React组件是构建用户界面的独立、可复用的代码块。在这个场景下，我们可以创建一个...
antd单文件引入示例
01-08
通过合理选择引入的文件，可以按需加载，优化项目的体积，提高加载速度，同时保持代码的可维护性和用户体验。在实际开发中，还需要结合Babel进行代码转换，以便在不同浏览器中运行React和antd的现代JavaScript语法。
在react项目中引入antd
宫崎骏爷爷的捣蛋野孩子
10-08 6337
在react项目中引入antd 一、antd官网地址 https://ant.design/docs/react/introduce 二、引进antd（直接引入） 1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save 2、在react项目的css文件中引入 Antd的css @import 'antd/dist/antd.css'; 3、看文档使用： 如使用Button： 1、在对应
React使用antd
qq_54780032的博客
12-07 4622
react使用antd
React之使用antd组件
学习笔记
09-04 2222
进入网页点击组件就可以看到网页需要的各种配件，如按钮、导航栏等等，并且配有各种使用方法的API，目前已经更新到4.22版本，原本是只支持react不过后来也支持vue了。antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。antd还可以更改主题颜色，按需引入组件的css，不过得小小操作一下，以后需要了再来补。进入组件选一个比较好看的组件，比如我觉得这个导航栏不错。然后选择js的代码，copy到App组件就行了。终于，ul设置一下就可以了。
React给antd中TreeSelect组件左侧加自定义图标icon
见贤思齐焉，见不贤内自省
11-03 4535
很多时候官网并没有给我们过多地详解来解释他们的产品怎么使用。 今天碰到了一个很恶心的问题，就是在给antd的treeSelect组件加左侧icon的时候，总是报一个警告， Warning: Each child in a list should have a unique “key” prop. 告诉我们每一个节点都需要有一个唯一的key。 首先我这里简单的封装了一下treeSelect这个组件： import React from 'react'; import { TreeSelect } from
React学习day11antd--组件：按钮、图标
weixin_46758732的博客
06-22 1206
ant-design：https://ant.design/index-cn antd（ant-design）的基本使用 安装ant-design 在项目下的控制台输入：yarn add antd
Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
JEECG官方博客
07-15 9494
JeecgBoot实战 - 引入 ant-design-vue 按需加载方案，减少前端项目大小
react antd的关于图标两个小问题
fupingfuping的专栏
08-20 1185
根据后台菜单返回的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], {
antd按需加载
Keep It Simple, Stupid
02-19 3229
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中后台设计语言，利用统一的设计规范、前端实现、设计/研发工具链对产品研发赋能，全面提高中后台产品体验和研发效率。 本来react首页渲染速度就很慢，ant按需加载是非常有必要的。 打开react-script/config/webpack.config.dev.js 找到“Process JS with Babel.” 在o...
react+webpack+antd框架自定义使用阿里iconfont图标。
05-19
要在React+Webpack+Antd框架中使用阿里Iconfont图标，需要进行以下步骤： 1. 在阿里Iconfont官网上选择需要的图标，并将它们添加到购物车中。 2. 在购物车中选择需要的图标，并下载iconfont文件。 3. 将下载的iconfont文件解压缩，并将其中的iconfont.ttf文件移动到项目的src/assets/fonts文件夹中（如果该文件夹不存在，可以新建一个）。 4. 在项目的src/index.js文件中引入iconfont.css文件，并在该文件中定义所需的图标类名。例如： ```css @font-face { font-family: 'iconfont'; src: url('./assets/fonts/iconfont.ttf') format('truetype'); } .iconfont { font-family: 'iconfont' !important; font-size: inherit; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` 5. 在需要使用图标的组件中，使用antd的Icon组件，并将type属性设置为所需图标的类名，例如： ```jsx import React from 'react'; import { Icon } from 'antd'; import './iconfont.css'; function MyComponent() { return ( <div> <Icon type="iconfont icon-xxx" /> </div> ); } export default MyComponent; ``` 其中，"icon-xxx"是阿里Iconfont中所需图标的类名。 完成上述步骤后，就可以在React+Webpack+Antd框架中成功使用阿里Iconfont图标了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值