React中实现antd自定义图标,鼠标悬浮变色

借助 antd 的 tooltip 组件来实现 hover 时变色的效果

1.新建组件

自定义图标一般在iconfont上面获取,复制下来的svg代码,切记要删除 fill 属性后添加到组件中

import { Tooltip } from "antd";
import React from "react";const HoverableSvg = () => {return (<Tooltip className="hover-icon">{/* <svg> ...</svg> */}</Tooltip>);
};export default HoverableSvg;

2.修改样式

在全局样式文件或组件的局部样式中,添加:

.hover-icon {fill: #8a8a8a;
}.hover-icon:hover {fill: #faad14;
}

3.使用组件

import HoverableSvg from "../components/HoverableSvg";<HoverableSvg className="com-icon" />

4.效果

没有错,我在copy某绒,哈哈哈哈

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/52839.shtml

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

相关文章

一种后缀数组的奇妙运用

最近参加了thucamp&#xff0c;其中day5的E题是一个有难度的字符串。 大部分人都是用后缀自动机做&#xff0c;我也是这样感觉的&#xff0c;不过想了好一会儿也没有很清晰的思路&#xff0c;但是突然想到了一个用后缀数组建树的方法&#xff0c;我2h码了7kb的代码&#xff0c…

webpack4手动搭建Vue项目

小满视频 很多解释使用通义灵码搜的,通义灵码的搜索结果也是有错误的全程使用pnpm包管理工具&#xff0c;和npm的用法基本一样 学习总结 1. 多看看webpack官网 2. webpack的作用&#xff1a;配置一堆东西&#xff0c;达到运行程序的目的 3. 无论什么东西都转成js&#xff0c;…

理解数据库系统的内部结构

数据库系统在我们的数字世界中扮演着关键角色。本文将介绍数据库系统的内部结构&#xff0c;帮助初学者了解其基本概念。 数据库系统的三级模式 数据库系统内部采用三级模式二级映像结构&#xff0c;包括外模式、模式和内模式。这种结构确保了数据的逻辑独立性和物理独立性。…

51-java jpa和mybatis的区别

‌JPA和MyBatis是两种不同的持久层框架&#xff0c;它们在设计和使用上有显著的区别。‌ ‌JPA&#xff08;Java Persistence API&#xff09;‌ 是一个ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;它是Java EE的一部分&#xff0c;旨在通过注解或XML配置来定义实…

CHAMELEON算法原理及Python实践

CHAMELEON&#xff08;变色龙&#xff09;算法是一种两阶段的层次聚类算法&#xff0c;其原理和特点可以归纳如下&#xff1a; 一、算法概述 CHAMELEON算法通过动态建模的方式&#xff0c;结合了数据的初始划分&#xff08;通过图划分算法&#xff09;和一种新颖的层次聚类方…

如何在Android项目中进行性能优化分析?

引言 在开发过程中&#xff0c;性能优化是一个重要的话题。用户对于应用的性能有着非常高的期望&#xff1a;快速启动、流畅的操作体验、低内存消耗等。那么&#xff0c;作为开发者&#xff0c;我们如何才能在项目中进行性能优化分析呢&#xff1f;今天就来和大家聊聊这个话题…

Linux常见基础命令

Linux基础 初级学习阶段需要了解的知识一、Linux基础命令查阅命令帮助信息1.man2.help Linux命令的基本实用目录操作文件内容操作查看某文件下的用户操作日志压缩和解压缩sudo用户权限操作用户权限操作TOP文件安装 上一篇 VMware安装linux环境 初级学习阶段需要了解的知识 1.…

什么是 AWS CloudWatch?

AWS CloudWatch 是 AWS 提供的一项全面的监控和可观测性服务&#xff0c;使用户能够收集和可视化指标、日志和事件&#xff1b;设置警报&#xff1b;并根据预定义的条件自动执行操作。CloudWatch 提供对 AWS 资源和应用程序的运行状况、性能和运行状态的深入了解&#xff0c;使…

autoware整体架构的分析

autoware framework sensinglidar driver&#xff08;lidar驱动&#xff09;PointCloud Preprocessing&#xff08;点云预处理&#xff09;Detection&#xff08;检测&#xff09;GNSS (全球导航卫星系统)IMU (惯性测量单元) Localization&#xff08;定位&#xff09;Pose Ini…

8.28安装linux服务器注意事项和一些命令

一、解析域名配置 vi /etc/named.conf 配置相关的域名 systemctl start named //开启named服务 二、防火墙查找端口号列表 firewall-cmd --list -ports; 开启端口号 firewall-cmd --add-port端口号/tcp 重载防火墙 firewall-cmd --reload

#Datawhale X 李宏毅苹果书 AI夏令营#1.2了解线性模型

1.2线性模型 什么是线性模型&#xff1f; 初始模型&#xff1a;, 其中y表示观看人数&#xff0c;x1表示前一天的观看人数&#xff0c;这个模型就是在用前一天的观看人数来预测当前的观看人数。 模型改进&#xff1a; 然而真实的数据是有周期性的&#xff0c;每隔7天&#…

这本大模型书一定要读!李开复、周鸿祎都强烈推荐的《实战AI大模型》(附PDF)

《实战AI大模型》是一本旨在填补人工智能&#xff08;AI&#xff09;领域&#xff08;特别是AI大模型&#xff09;理论与实践之间鸿沟的实用手册。书中介绍了AI大模型的基础知识和关键技术&#xff0c;如Transformer、BERT、ALBERT、T5、GPT系列、InstructGPT、ChatGPT、GPT 4、…

无人机之云台的作用

无人机云台在无人机技术中扮演着至关重要的角色&#xff0c;其作用主要体现在以下几个方面&#xff1a; 一、 确保拍摄稳定性 防抖动&#xff1a;无人机在飞行过程中&#xff0c;尤其是在复杂环境下&#xff0c;如遇到风力干扰或进行高速飞行时&#xff0c;机身容易产生震动和…

Prometheus+Grafana的安装和入门

概念 什么是Prometheus? Prometheus受启发于Google的Brogmon监控系统&#xff08;相似kubernetes是从Brog系统演变而来&#xff09;&#xff0c; 从2012年开始由google工程师Soundclouds使用Go语言开发的开源监控报警系统和时序列数据库(TSDB)。&#xff0c;并且与2015年早起…

【Linux —— POSIX信号量 - 基于环形队列的生产消费模型】

Linux —— POSIX信号量 - 基于环形队列的生产消费模型 POSIX信号量信号量的概念POSIX信号量的类型信号量的操作 POSIX信号量函数基于环形队列的生产消费模型设计思路同步和安全性代码 POSIX信号量 信号量的概念 POSIX信号量是一种用于进程和线程之间同步的机制&#xff0c;主…

CSS 的超级好用的object-fit属性

object-fit 是 CSS 中的一个非常有用的属性&#xff0c;它决定了替换元素&#xff08;如 <img>、<video>、<canvas> 等&#xff09;的内容应该如何适应其使用的高度和宽度。这个属性解决了在不同布局和屏幕尺寸下&#xff0c;如何优雅地控制元素内容显示的问…

【netty系列-08】深入Netty组件底层原理和基本实现

Netty系列整体栏目 内容链接地址【一】深入理解网络通信基本原理和tcp/ip协议https://zhenghuisheng.blog.csdn.net/article/details/136359640【二】深入理解Socket本质和BIOhttps://zhenghuisheng.blog.csdn.net/article/details/136549478【三】深入理解NIO的基本原理和底层…

数据结构(邓俊辉)学习笔记】串 16——Karp-Rabin算法:串即是数

文章目录 1. 化串为数2. 凡物皆数3. 亦是数 1. 化串为数 接下来的这节&#xff0c;我们再来讨论一种十分另类的串匹配算法&#xff0c;也就是所谓的 Karp-Rabin 算法。回顾此前所介绍的几种串匹配算法&#xff0c;我们所面临的难题是一样的。也就是说在这里&#xff0c;我们每次…

Windows 10/11降级漏洞的工具包现已发布 仅供安全测试

早前有研究人员在分析 Windows 10/11 更新机制时发现微软虽然已经考虑到潜在的安全问题增加了各种限制&#xff0c;但还是存在失误因此存在弱点&#xff0c;研究人员则通过该弱点成功降级了系统。通过该漏洞不仅可以成功降级系统&#xff0c;同时系统还会认为自己已经完成更新并…

python高阶知识之函数装饰器详解

先看一个示例 定义一个函数&#xff0c;传入数字&#xff0c;经过for循环后写入txt文件。 def writenum(num:int):""":param num: 传入数字:return:"""for i in range(num):with open(1.txt,a) as e:e.write(str(i)) 当执行函数后会在相同目录…