渐变icon 实现

• 前言

  平常开发中，有时候要为了展示一些炫酷的效果，然展示的色彩更加丰富，有时候会使用多种色彩进行组合呈现，这时候就会用到渐变了，正好在项目中icon的时候也用到了渐变icon。有哪些方式实现呢。

• 使用 png /svg 图片

  这类方法实现比较简单粗暴，直接叫UI截图就能快速搞定，省事。
  优点：省事，不存在什么兼容性问题。
  缺点：单独占用一个资源请求，换颜色之类的需再让UI切，对于高清屏icon会出现锯齿之类的。

• 使用 iconfont，CSS3 渐变处理

  使用iconfont 具体步骤：

  1. 引入iconfont字体库对应样式。<br>
     复制代码

  2. CSS对icon进行处理。<br>
     复制代码

  具体代码如下：
  HTML

<i class="van-icon van-icon-like like-linear-gradient"
"></i>
复制代码

CSS

    .like-linear-gradient {
         background-image: linear-gradient(#01cdfe, #1f19fb);
        -webkit-background-clip: text;
        color:transparent;
    }
  
复制代码

兼容性：
background-clip:

优点：后期替换颜色，只需要改变渐变颜色进行了，iconfont 矢量的，不会出现锯齿图。
缺点：兼容性会得注意，线性的效果调起来没那么方便。