uniapp icon渐变色

Uniapp不支持直接设置图标的渐变色，但是可以使用以下两种方法来实现类似效果：

1. 使用CSS3的渐变色背景

可以将图标作为一个背景，并设置渐变色背景。例如：

<view class="icon">
  <image src="/static/icon.png"></image>
</view>

.icon {
  background: linear-gradient(to bottom, #ff0000, #00ff00);
  display: inline-block;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

这里使用了CSS3的linear-gradient属性来设置渐变色背景，同时设置了text属性使图标作为背景，达到渐变色的效果。

2. 使用SVG图标

Uniapp支持使用SVG图标，可以在SVG中设置渐变色。例如：

<svg class="icon" viewBox="0 0 1024 1024">
  <path d="M512 96a416 416 0 1 1-416 416A416 416 0 0 1 512 96z m0 768a352 352 0 1 0-352-352 352 352 0 0 0 352 352z"></path>
</svg>

这里使用了一个简单的SVG图标，可以在path的fill属性中设置渐变色。例如：

.icon path {
  fill: url(#grad);
}

这里使用了一个id为grad的渐变色定义，可以在SVG中定义如下：

<svg width="0" height="0">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ff0000;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#00ff00;stop-opacity:1" />
    </linearGradient>
  </defs>
</svg>

这里定义了一个从红色到绿色的渐变色。