当前位置: 首页 > news >正文

react使用createFromIconfontCN,自定义iconfont 图标

记录react+antdesign项目中使用createFromIconfontCN,自定义iconfont 图标
效果图:
在这里插入图片描述

import { createFromIconfontCN } from '@ant-design/icons';const MyIcon = createFromIconfontCN({scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);  // icon-example的名字可以自定义

接下来具体说一下怎么在 iconfont.cn 上生成scriptUrl
首先打开iconfont官网登录注册
登录后将选中的icon加入购物车
在这里插入图片描述
打开购物车可以看到里面添加的所有icon,点击下方按钮添加到项目
在这里插入图片描述
可以创建新的项目,也可以将图标加到旧项目里面在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
引用时

<MyIcon type="icon-home" />

注意:
1.如果是菜单栏的icon,注意不要使用icon本身带颜色的,也不要在项目里修改icon的颜色,否则选中菜单时,icon不会自动变色,比如上图的icon-kehu,本身自带黑色,选中时icon还是黑色
2.每次修改iconfont项目里的图标,或者新增图标到iconfont项目中,都要重新生成scriptUrl

http://www.dtcms.com/a/136086.html

相关文章:

  • 艺术字体AI生成阿里云WordArt锦书、通义万相、SiliconFlow、Pillow+OpenCV本地生成艺术字体
  • web前端开发:CSS的常用选择器
  • 第七节:React HooksReact 18+新特性-并发模式(Concurrent Mode)解决了什么问题?
  • C++ IO流
  • CANoe自动化测试用例log保存(专栏:车载网络诊断测试攻略从零开始搭建一个UDS诊断自动化测试CANoe工程)
  • 58.最后一个单词的长度
  • 使用excel 制作数据库的数据浏览器
  • 使用cursor进行原型图设计
  • 解决本地浏览器访问服务器端语音识别项目显示“麦克风未授权”的问题
  • 【代理错误 django】Request error: HTTPSConnectionPool(host=‘‘, port=443): 、
  • openwebui搭建mcp
  • Windows安装Ollama并指定安装路径(默认C盘)
  • WebStorm中Gitee账号的密码登录与令牌登录设置
  • 每日一道leetcode
  • 天元证券|奶粉行业结构性回暖 乳企竞速全龄化、国际化
  • java忽略浅拷贝导致bug
  • blender 导出衣服mesh为fbx,随后导入UE5,坐标轴如何保存一致
  • 算法基础(以acwing讲述顺序为主,结合自己理解,持续更新中...)
  • 3.k8s是如何工作的
  • 【Web前端技术】第一节—HTML简介
  • 【C到Java的深度跃迁:从指针到对象,从过程到生态】第二模块·语法迁移篇 —— 第四章 数据类型:从sizeof到包装类的进化
  • ocr-身份证正反面识别
  • 一个由通义千问以及FFmpeg的AVFrame、buffer引起的bug:前面几帧影响后面帧数据
  • 关于系统架构思考,如何设计实现系统的高可用?
  • FlexRay协议详解:优点、缺点及常用MCU推荐
  • 【HDFS入门】HDFS副本策略:深入浅出副本机制
  • 【Web APIs】JavaScript 操作多个元素 ④ ( 表格全选复选框案例 )
  • 脉冲编码调制(PCM)在三角形信号中的应用
  • 力扣热题100—滑动窗口(c++)
  • 团体程序设计天梯赛L2-008 最长对称子串