react调用antd4.X自定义图标 icon | 阿里巴巴矢量图标

最新推荐文章于 2024-02-20 17:45:00 发布
最新推荐文章于 2024-02-20 17:45:00 发布
阅读量481 收藏
点赞数
分类专栏： React&Ant Design 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/this_zq/article/details/124628517
版权

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 解决阿里巴巴矢量图标自定义更改后无法引用问题

在这里插入图片描述

当我们更改了阿里矢量图标后会出现这行次，而且生成以后无法调用。咱办嘞，有一个方法！

  1. 我们把刚刚改的图标下载下来

在这里插入图片描述

  1. 然后再给上传上来

在这里插入图片描述

  1. 找到我们刚刚上传的图标，加入购物车。

在这里插入图片描述

4.生成代码，完成调用！

在这里插入图片描述

在这里插入图片描述

潜心专研的小张同学
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react调用antd4.X自定义图标 icon（深入，解决阿里巴巴矢量图标自定义更改后无法引用问题）
weixin_43207103的博客
09-02 1852
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 解决阿里巴巴矢量图标自定义更改后无法引用问题 当我
react+antd框架自定义使用阿里iconfont图标。
weixin_39385485的博客
11-29 6227
首先打开iconfont，找到我们需要的icon，如果要icon跟随字体选中状态的颜色改变而改变，尽量使用单色图标。如图： 2、加入购物车之后，点击下载代码，放到桌面，将文件夹下的iconfont.js文件引入项目中，我一般放在util文件夹下，如图： 3、在需要的.jsx页面下引入我们的iconfont.js文件： import iconFont from '../../../utils...
react antd-menu中使用阿里巴巴图片矢量库iconfont
fffmmmm的博客
09-23 385
1、注册阿里巴巴登录，创建项目 2、搜索图片资源，加入购物车，点击购物车，添加图标到项目中。 3、生成symbol连接 4、antd 4.0以上使用 导入import{createFromIconfontCN}from'@ant-design/icons'; 创建IconFont exportconstIconFont=createFromIconfontCN({ //scriptUrl:'//at.alicdn.com/t/font_1973986_a38...
React + Antd 实现 icon 选择
ooooooooooos的博客
11-06 959
React 实现选择 Antd icon
react中动态渲染antd的icon
CHENC0518的博客
02-20 438
【代码】react中动态渲染antd的icon。
react+antd拖拽生成自定义表单.rar
06-08
首先，让我们了解一下`react+antd拖拽生成自定义表单.rar`这个项目的核心概念。项目使用TypeScript（TS）进行编写，这是一种在JavaScript基础上添加静态类型检查的超集。TypeScript提供更好的代码工具支持，有助于...
【JavaScript源代码】react+antd.3x实现ip输入框.docx
12-29
- 在`constructor`方法中，使用`React.createRef()`创建了4个引用对象，这些引用将用于在不同输入框之间切换焦点。 2. **Ant Design（Antd）Input组件**： - Antd的`Input`组件被用来创建四个数字输入框，分别...
react-antd.zip
05-25
在本文中，我们将深入探讨如何使用`react-antd`、`antd` UI 框架、`react-router-dom` 和 `styled-components` 进行React项目开发。这四个关键组件是构建现代前端应用的重要工具，它们能帮助我们快速构建美观且功能...
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...
antd form 封装可搜索可输入select
最新发布
03-29
antd form 封装可搜索可输入select
react+ts仿antd icon库
lin_fightin的博客
03-20 512
icon库 从上古时代的雪碧图，到近代的font-icon，到现代的svg（开个玩笑）,越来越多的开发人员选择了svg,因为他们即取即用，并且不会出现项font-icon很多不知名的Bug。 这个icon库是以font-awesome为基础包装成自己的icon组件库。他山之石可以攻玉嘛 先来安装三个库 cnpm i --save @fortawesome/fontawesome-svg-core cnpm i --save @fortawesome/free-solid-svg-icons（免费的库，也有要
react中使用antd按需加载及图标的使用
my466879168的博客
10-19 2469
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"} ] 位置在： ...
react + antd 动态生成 Icon 结点解决方案
Colbru的博客
07-12 2222
由于菜单栏内容较多，创建了一个菜单栏的数组，但是直接使用icon的话会直接显示文字。 页面上会显示的是文字，是错误的展示(如下图） 数组创建如下： 解决方案：使用React.createElement 创建 import * as Icon from '@ant-design/icons'; //引入antd-icon import * as Icon from '@ant-design/icons //创建节点的方法 iconBC(name){ console.log(n
react+antd中使用iconfont symbol模式
ch071714301的专栏
07-29 976
阿里妈妈iconfont，使用symbol 新建组件iconfont 具体页面中引入组件： importIconFontfrom'./../../components/icon-font'; 使用组件： <IconFonttype="iconadd"style={{fontSize:'20px',color:'#666'}}/> ...
react ant icon的简单使用
琳琳的博客
08-03 2101
上面这行代码就是在页面引入了ant的icon StarOutlined,在页面显示的是一个空心的星星。3.在需要的位置使用这个icon。
十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件
*
12-02 5829
一、Antd(Ant Design)的使用：引入全部Css样式 1.1 antd官网： https://ant.design/docs/react/introduce-cn 1.2 React中使用Antd 1、在项目根目录安装antd【每个项目都安装一次】： npm install antd --save / yarn add antd / cnpm install...
antdv4 Icon 的使用
weixin_40795574的博客
09-05 7952
antdv4 Icon 的使用 正常使用，按需导入 这个就不多说了，需要单独从@ant-design/icons导入，官方都是例子，例如 import { MenuUnfoldOutlined } from '@ant-design/icons'; <MenuUnfoldOutlined /> 类型可变，动态设置 主要是想说一下提前不知道需要哪个图标，type 是存在后端或者配置文件中的使用场景，这个时候前端没办法知道需要导入哪些图标 比如这样的场景，菜单栏的图表是路由表中配置的 route
React遍历antd库的icon出现的一些问题
Voiceu的博客
03-14 888
用React进行动态遍历导航栏的时候，icon一直出不来，目前版本的antd已经和教学视频中的不一样了， 要遍历的列表数组如下 我改了icon为字符串的很多种形式， 都不行 遍历代码如下 结果如下，无法显示想要的icon 随后将icon导入list文件中，将列表中的字符串改成对象形式 这次icon出来了，但是多级列表的title不显示，而且多级列表点进去样式也丢失了 正常情况下该是这样 后来发现是忘了写多级列表的title，但是子级列表样式依旧丢失，最终发现是给多级列表添加了List，本来该菜
react/antd-pro本地引入iconfont
weixin_43735321的博客
09-26 779
react/antd-pro本地引入iconfont****最终方案:**** 在网上找了很多例子,但是都不好用. 1.第一种实现方式需要引入 antd的Icon组件,但是antd4.0版本已经弃用了 const IconFont = Icon.createFromIconfontCN({ scriptUrl: iconFont }) 2.第二种实现方式需要在 defaultSettings.ts 的iconfontUrl 中填入链接,但是我的没有实现,所以放弃了 const proSettings: De
react,js和antd4.x表单的t提交
05-30
在React.js和Ant Design 4.x中，表单的提交可以通过使用Form组件的onFinish属性来实现。当表单中的所有表单项都通过验证时，onFinish事件会被触发，并且会将表单的值作为参数传递给事件处理函数。下面是一个简单的例子，展示了如何在React.js和Ant Design 4.x中提交表单。 首先，在你的代码中导入所需的模块： ```js import React, { useState } from 'react'; import { Form, Input, Button } from 'antd'; ``` 接下来，创建一个表单组件： ```js const MyForm = () => { // 定义表单项的值 const [form] = Form.useForm(); // 表单提交事件 const handleSubmit = (values) => { console.log('Received values of form: ', values); // 在这里可以提交表单数据到服务器 }; return ( <Form form={form} onFinish={handleSubmit}> <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]}> <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}> <Input.Password /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; ``` 在这个例子中，我们使用了Ant Design的Form、Input和Button组件来创建表单。在表单中，我们定义了一个onFinish事件处理函数handleSubmit，当表单中的所有表单项都通过验证时，该事件会被触发。在事件处理函数中，我们可以获取到表单的值，并将其提交到服务器。 最后，我们将表单组件渲染到页面中： ```js ReactDOM.render(<MyForm />, document.getElementById('root')); ``` 这是一个简单的例子，你可以根据自己的需求来添加更多的表单项和验证规则。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值