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

相关推荐
mapbar_front4 分钟前
react项目开发—关于代码架构/规范探讨
前端·react.js
二木一夕10 分钟前
Vue 3 的组合式 API和传统选项式 API区别(vue2转vue3,两者差异)
前端
LuckySusu12 分钟前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu13 分钟前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu14 分钟前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js
小菜摸鱼17 分钟前
Node.js + vue3 大文件-切片上传全流程(视频文件)
前端·node.js
LuckySusu20 分钟前
【vue篇】Vue 2 响应式“盲区”破解:如何监听对象/数组属性变化
前端·vue.js
LuckySusu20 分钟前
【vue篇】Vue Mixin:可复用功能的“乐高积木”
前端·vue.js
勤奋菲菲25 分钟前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
洋不写bug32 分钟前
前端环境搭建,保姆式教学
前端