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某绒,哈哈哈哈

相关推荐
光影少年1 分钟前
前端线上出现白屏如何排查问题所在,利用第三方的工具都有哪些
前端·学习·web安全·前端框架
濑户川5 分钟前
Vue3 计算属性与监听器:computed、watch、watchEffect 用法解析
前端·javascript·vue.js
_Sem14 分钟前
KMP实战:从单端到跨平台的完整迁移指南
android·前端·app
Carry34516 分钟前
React 与 Vue 开发差异——CSS 样式
前端
前端九哥19 分钟前
我删光了项目里的 try-catch,老板:6
前端·vue.js
2301_7644413320 分钟前
身份证校验工具
前端·python·1024程序员节
4Forsee37 分钟前
【Android】View 事件分发机制与源码解析
android·java·前端
VT.馒头1 小时前
【力扣】2725. 间隔取消
javascript·leetcode·1024程序员节
一 乐1 小时前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·车辆管理
百锦再1 小时前
Python、Java与Go:AI大模型时代的语言抉择
java·前端·vue.js·人工智能·python·go·1024程序员节