请教一个 naiveUI 彩色 icon 问题

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

<n-button> <template #icon> <n-icon color="red"> <HourglassOutline /> </n-icon> </template> </n-button> 

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

<n-button> <template #icon> <n-icon class="Gradient"> <HourglassOutline /> </n-icon> </template> </n-button> 

@property --colorA { syntax: '<color>'; inherits: false; initial-value: fuchsia; } @property --colorC { syntax: '<color>'; inherits: false; initial-value: #f79188; } @property --colorF { syntax: '<color>'; 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; } }