请教一个 naiveUI 彩色 icon 问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

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;
  }
}

6 条回复