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

文章目录

  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.hqwc.cn/news/439767.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于虚拟机ubuntu系统无法上网问题

一、虚拟机的连接方式 1、查看自己虚拟机的网络连接方式 选择虚拟机->右键设置->网络适配器 2、拓展——虚拟机的三种网络模式 2.1 首先安装虚拟机后&#xff0c;可以看到主机网络适配器多2张网卡 2.2 在VMware虚拟机中查看网络设置 点击菜单栏编辑 -> 虚拟网络…

websocket 通信协议

websocket是什么 答: 它是一种网络通信协议&#xff0c;是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 意思就是服务器可以主动向客户端推送信息&#xff0c;客户端也可以主动向服务器发送信息 属于服务器推送技术的一种. 为什么需要websocket? 疑问?…

Exchange:清理日志文件

准备脚本&#xff1a; 准备清理日志文件的脚本 # Set execution policy if not set $ExecutionPolicy Get-ExecutionPolicy if ($ExecutionPolicy -ne "RemoteSigned") {Set-ExecutionPolicy RemoteSigned -Force }# Cleanup logs older than the set of days in …

数据结构奇妙旅程之七大排序

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …

vue实践:构建高效的电子签名功能

前言 在现代数字化时代&#xff0c;电子签名成为了一种方便、高效且安全的签署文件的方式。本文将介绍电子签名的原理和实现方法&#xff0c;帮助你快速掌握这一重要的工具。 电子签名是什么&#xff1f; 电子签名是一种数字化的签名方式&#xff0c;用于验证和确认电子文档、…

85.网游逆向分析与插件开发-物品使用-物品使用的逆向分析与C++代码的封装

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;项目需求与需求拆解-CSDN博客 码云地址&#xff08;ui显示角色数据 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;453dd83d54140d2e1ee65c9…

【vue】defineModel在vue3.4中的最新用法和详解

在2023年12月28日&#xff0c;尤大发布了vue3.4版本&#xff0c;这个版本主要对一些实验性特性的改进&#xff08;比如defineModel&#xff09;&#xff0c;大量重写了模板编译器并重构了响应式系统&#xff0c;可以说是大大提升了运行速度和效率。 之前在vue3.3中defineModel…

Rust循环和函数

下面聊聊以下主题&#xff1a; 基于条件的分支循环函数属性测试 基于条件的分支 基于条件的分支&#xff0c;可以通过常见的 if、if else 或 if else if else 构造来完成&#xff0c;例如下面的示例&#xff1a; fn main() { let dead false; let health 48; if dead { p…

纯html+js+css个人博客

首页 <!DOCTYPE HTML> <html> <head> <title>博客</title> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <meta name"viewport" content"widthdevice-width, initial-sca…

仅4步,彻底玩转如何在Word中插入页脚数字

Word中首页无需添加数字&#xff0c;从第二页开始添加数字。 Step 1&#xff1a;如下图&#xff0c;将内容设定为如下&#xff0c;“首页不同”一定要选中&#xff1b; Step 2&#xff1a;选择工具栏中的“页码”&#xff1b; Step 3&#xff1a;接下来选择“页码”下的“设置…

十一、C++核心编程(1)内存分区模型

本阶段主要针对面向对象程技术做详细讲解&#xff0c;探讨C中的核心和精髓。 一、内存分区模型 1、C程序在执行时&#xff0c;将内存大方向划分为4个区域&#xff1a; 代码区:存放函数体的二进制代码&#xff0c;由操作系统进行管理的全局区:存放全局变量和静态变量以及常量…

使用PowerBI 基于Adventure Works案例分析

Adventure Works案例分析 前言 数据时代来临&#xff0c;但一个人要顺应时代的发展是真理。 数据分析的核心要素 那数分到底是什么&#xff1f; 显然DT 并不等同于 IT&#xff0c;我们需要的不仅仅是更快的服务器、更多的数据、更好用的工具。这些都是重要的组成部分&…