如何在JavaScript中实现图标的渐变填充动画效果？

问题根源在于React Icons输出的是SVG元素，background-clip: text仅对普通文本节点生效，而SVG的颜色由自身fill属性控制，直接给图标加样式类无法触发渐变效果。以下是可行的修改方案：

核心思路 #

给图标套一层父容器，将渐变背景、background-clip: text及动画效果应用在父容器上；同时把SVG图标的fill设为currentColor，让图标继承父容器的颜色（透明状态下会透出背景渐变），最终通过动画改变背景位置实现从下往上的填充效果。

修改后的完整代码 #

import "./styles.css";
import React from "react";
import { FaHourglass } from "react-icons/fa";
import { Button, styled } from "@mui/material";
import clsx from "clsx";

export default function App() {
  const [fill, setFill] = React.useState(false);
  const handleClick = () => {
    setFill(!fill);
  };

  return (
    <Root className="App">
      {/* 给图标添加父容器承载渐变效果 */}
      <div className={clsx({ iconContainer: true, iconFill: fill })}>
        <FaHourglass className="icon" />
      </div>
      <Button variant="contained" onClick={handleClick}>
        Press to fill
      </Button>
      <b className={clsx({ icon: true, iconFill: fill })}>TESTING</b>
    </Root>
  );
}

const Root = styled("div")(({ theme }) => ({
  width: "100%",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
  gap: 10,

  // 父容器默认样式
  "& > .iconContainer": {
    fontSize: 100,
    color: "LightGrey",
    // 让SVG继承父元素的颜色值
    "& .icon": {
      fill: "currentColor"
    }
  },

  // 填充状态的样式
  "& > .iconFill": {
    color: "transparent",
    animation: "fillIcon 5s ease-out forwards", // forwards保持动画结束状态
    backgroundImage: "linear-gradient(to top, SandyBrown 50%, LightGrey 50%)",
    backgroundSize: "100% 200%",
    backgroundPosition: "0% 0%",
    backgroundClip: "text",
    "& .icon": {
      fill: "currentColor"
    }
  },

  // 普通文本默认样式
  "& > .icon": {
    fontSize: 100,
    color: "LightGrey"
  },

  "@keyframes fillIcon": {
    "0%": {
      backgroundPosition: "0% 0%"
    },
    "100%": {
      backgroundPosition: "0% 100%"
    }
  }
}));

关键修改说明 #

1. 新增父容器承载渐变背景与动画，避免直接操作SVG元素的局限性
2. 设置SVG的fill: currentColor，让图标颜色跟随父容器的颜色变化
3. 动画改为forwards模式，确保填充完成后保持最终状态（如需循环效果可改回infinite）

修改后点击按钮，图标即可和文本同步呈现从下往上的渐变填充效果。

内容的提问来源于stack exchange，提问作者Cave Johnson