我一直在绞尽脑汁地试图给页面中的字体图标添加渐变。无论我的目标是什么，我似乎都无法让它工作。我只能通过使用a标签或svg本身的color属性来获得.active图标的颜色，而svg本身并不支持渐变。
我已经尝试了很多解决方案，我发现在这里和其他网站上使用background-clip，但由于某种原因，他们似乎不工作.我的网站是使用next.js，这就是为什么类看起来像那样有趣，但我不认为它会影响图标的样式.
当fontawesome组件有.active类时，我如何对它应用渐变？
这是该元素的代码

const [video, setVideo] = useState({
    videoUrl:"resources/videos/video1.mp4",
    videoType: "video/mp4",
    videoTitle: "Explore ",
    videoMsg: "Express ",
    videoButton: "Features"
  });
const [numberState, setNumberState] = useState(1);

  const refillHook = (obj, i) => {
    setVideo({
      videoUrl: obj.link,
      videoType: obj.type,
      videoTitle: obj.title,
      videoMsg: obj.msg,
      videoButton: obj.button
    });
    setNumberState(i);
  }

  const videoItem = IconsVideos.map((video, i) => {
    return (
      <a onClick={() => refillHook(video, i)} className={numberState === i && `${Styles.active}`} key={i}>
          <FontAwesomeIcon
            className={`${Styles.iconLink}`}
            icon={faCoffee}
            size="2x"
          />
      </a> 
  )});

  return (
    <section className={`${Styles.stripe} ${Styles.stripeWithIcons} ${Styles.segment}`}>
        <div className={`${Styles.left} ${Styles.leftWithIcons}`}>
          <div className={`${Styles.leftInnerWithIcons}`}>
            <div className={`${Styles.iconsContainer}`}>
              <ul className={`${Styles.iconsList}`}>
                {videoItem}
              </ul>
            </div>
            <div className={`${Styles.videosContainer}`}>
              <VideoPlayer src={video.videoUrl} type={video.videoType} />
            </div>
        </div>
      </div>
      <div className={`${Styles.right} ${Styles.rightWithIcons}`}>
        <div className={`${Styles.rightInner}`}>
          <h1 className={`${Styles.pageH1}`} >{video.videoTitle}</h1>
          <p className={`${Styles.pageP}`}>{video.videoMsg}</p>
          <PageButton buttonText={video.videoButton} />
        </div>
      </div>
    </section>
  );
};