请教一个 naiveUI 彩色 icon 问题

naiveUI 里的图标可以通过给 icon 添加属性 color 来修改 svg 图标的颜色
像这样

后来我想要把这个颜色换成彩色动画, 然后我去搜索了相关信息, 找到了一个修改 background 属性的方法 … 但是这不是我要的效果, 我就是希望里面的那个图标渐变就好, 我试过加一个 background-clip, 加完之后就没效果了, 图标变成黑色了, 请问有什么好的方法可以实现我要的效果吗?

@property --colorA {syntax: '';
  inherits: false;
  initial-value: fuchsia;
}

@property --colorC {syntax: '';
  inherits: false;
  initial-value: #f79188;
}

@property --colorF {syntax: '';
  inherits: false;
  initial-value: red;
}

.Gradient {
  background: linear-gradient(45deg,
      var(--colorA),
      var(--colorC),
      var(--colorF));
  animation: change 5s infinite linear;
  /* background-clip: text; */
  
}

@keyframes change {
  20% {
    --colorA: red;
    --colorC: #a93ee0;
    --colorF: fuchsia;
  }

  40% {
    --colorA: #ff3c41;
    --colorC: #e228a0;
    --colorF: #2e4c96;
  }

  60% {
    --colorA: orange;
    --colorC: green;
    --colorF: teal;
  }

  80% {
    --colorA: #ae63e4;
    --colorC: #0ebeff;
    --colorF: #efc371;
  }
}