【React】在项目中使用阿里图标库

news/2024/7/15 18:58:38 标签: react.js, javascript, 前端

文章目录

  1. 打开阿里图标库 ==》 选择相应图标项目
    在这里插入图片描述

  2. 选择Symbol格式,并复制链接

在这里插入图片描述

  1. 基于antd新建一个JS文件 MyIcon.js,并绑定上面复制的链接
import { createFromIconfontCN } from '@ant-design/icons';

// 图标有更新时,需更新下面图标链接
export const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_4427318_zv4a7bz2oo.js',
});
  1. 在项目中使用,先复制好图标代码,例如icon-add-file

在这里插入图片描述

  1. 将图标代码绑定到type
import { MyIcon } from '@/components/MyIcon';

export default function(){

	return (
		<MyIcon type="icon-add-file" style={{ fontSize: '15px' }} />
	)
}

http://www.niftyadmin.cn/n/5362472.html

相关文章

Redis常用数据类型--Hash

Hash 常用命令HSETHGETHEXISTSHDELHKEYS/HVALSHGETALLHMGETHLENHSETNXHINCRBY/HINCRBYFLOAT 内部编码典型应用场景 常用命令 HSET 设置 hash 中指定的字段&#xff08;field&#xff09;的值&#xff08;value&#xff09; HSET key field value [field value ...]时间复杂度…

统计工具更新了!一站式完成医学研究影响因素分析(线性回归法),比SPSS和R更好用...

郑老师的“风暴统计”平台更新了&#xff01;接下来&#xff0c;我们的平台将陆陆续续形成一站式统计分析模块&#xff0c;包括&#xff1a; 影响因素分析混杂偏倚控制临床预测模型 我们也将春节后形成统计软件的PC端版本&#xff0c;将再也不怕宕机了&#xff01; 今天我们先更…

【微服务】skywalking自定义链路追踪与日志采集

目录 一、前言 二、自定义链路追踪简介 2.1 自定义链路追踪应用场景 2.2 链路追踪几个关键概念 三、skywalking 自定义链路追踪实现 3.1 环境准备 3.2 集成过程 3.2.1 导入核心依赖 3.2.2 几个常用注解 3.2.3 方法集成 3.2.4 上报追踪信息 四、skywalking 自定义日志…

MongoDB的分片集群(一) : 基础知识

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 目录导读 1. 什么是MongoDB分片 2. MongoDB分片集群介绍 2.1 MongoDB分片集群架构 2.2 MongoDB分片集群优势 3. 分片键…

springboot、redission、sentinel模式无法连接redis的终极解决办法

陌生的旅人啊&#xff0c;尝遍千方百计后&#xff0c;你终于来到了这里~何妨一试&#xff1f; 终极办法 对照springboot版本更换redission版本 redisson-spring-data与Spring Boot version的版本对应关系 redisson-spring-data版本springboot版本161.3.x171.4.x181.5.x202.0.…

C#小结:ScottPlot 5.0在VS2022桌面开发的应用(以winform为例)

目录 一、官网文档地址 二、在VS2022中安装Scottplot 三、拖动Scottplot 四、使用Scottplot 五、效果图 一、官网文档地址 官网地址&#xff1a;ScottPlot 5.0 食谱 本文内容来自于官网&#xff0c;选取了官网的一些比较好用的功能展示&#xff0c;如需学习更多功能&a…

探索网络定位与连接:域名和端口的关键角色

目录 域名 域名的作用 域名的结构 域名的解析配置 父域名、子域名​编辑 https的作用 端口 图解端口 端口怎么用 判断网站是否存活 端口的作用 域名 域名是互联网上用于标识网站的一种易于记忆的地址。 域名是互联网基础架构的一个重要组成部分&#xff0c;它为网…

使用 git 将本地文件上传到 gitee 远程仓库中,推送失败

项目场景&#xff1a; 背景&#xff1a; 使用 git 想要push 本地文件 到 另一个远程仓库&#xff0c;执行 git push origin master后此时报错 问题描述 问题&#xff1a; git push 本地文件 到 另一个远程仓库时&#xff0c;运行 git push origin master ,push文件失败&…