小程序实践：基础内容icon，关于图标的5个实现方案等

1）原生支持哪些类型

小程序的icon支持以下类型：

'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'

对应图像效果依次为：

主要失败、成功状态的提示，加三个下载、搜索、关闭图标。

2）示例与属性

图标使用的代码示例为：

<icon type="success" size="30px" color="green" />

图标共有三个属性：

3）图标与图片有什么不同

通过size属性，可以改变图标的大小：

使用图片也可以达到同样的效果，但是图片如果像素不够，放大了之后效果会虚；还有，图片需要另外存储与加载，使用起来不如图标只使用一个名称方便；再者就是，接下来会看到，图标可以随意改变颜色，而图像不能。

4）color改变的是像素的颜色

图标可以看作是一些像素点区域的集合，至于这些像素点是什么颜色，是由color属性决定的。像上面绿色的success图标，它的默认色是绿色，中间对勾部分是镂空的。如果我们给图标所在的容器一个背景色，那么对勾呈现的就是背景的颜色：

代码：

<view class="group" ==style="background:grey;"==>
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}px"/>
  </block>

</view>

我们可以通过color属性随意改变图标颜色：

但是中间对勾的颜色同时改变不了，因为它是由背景决定的。

下面看一下与图标有关的问题：

1）图标能否与文本同行，放在段落中？

可以。效果：

代码：

<view style="font-size:17px;">
  文本文本文本<icon type="success" size="14" color="success"/>文本文本文本文本文本文本文本文本文本文本<icon type="success" size="14" color="success"/>

</view>

文本与图标只能同时放在view标签下，放在text标签内是不行的。text不是容器类组件。

如果文本是从后台动态取出来的，穿插的图标的类型也是动态取出来的，能否实现解析、渲染？这个问题留给读者朋友们思考。

2）icon图标是怎么实现的，原理是什么？

在html中是没有原生的icon标签的，小程序基于浏览器引擎渲染，它的icon组件是怎么实现的？

A）最简单粗暴的方法，是使用img标签，每个图标对应一个图片。

但是这种方法有三个明显的缺点：造成大量http请求；不方便修改颜色；放大图片会虚。

B）后来有聪明的工程师发明了精灵图，什么是精灵图？

这是一个字译。英文叫Sprites，Sprite有精灵的意思，所以翻译成中文就是精灵图了。

更确切的意译，应该是连续图片集。精灵图是把一组图片以非重合、最小化的方式排列成一张图片，在加载的时候只加载一次，这就减少了http请求。

在使用的时候，能过背景图片的定位与裁剪呈现某一块区域的图标，代码如下：

<style type="text/css">
.icon{
  width: 68px;//控制裁剪区域大小
  height: 30px;
  background: url("sprites.png") -877px -201px;//定位位置
}

</style>

精灵图解决了http请求过多的问题，但是它的颜色不能改变，放大会图片会变虚。

C）这两个问题由矢量字体图标方案解决了。当浏览器渲染一个汉字（英文字符也是一样）的时候，首先看font-family样式，确定字体名，由字体名确定使用电脑里的哪个字体文件；接着以汉字的unicode在字体文件里查找对应的字符信息。

每个字符都有一个唯一的unicode编码，例如“小程序”这三个汉字的unicode为“\u5c0f\u7a0b\u5e8f”。每个unicode编码在字体文件中都对应一个唯一的字符描述信息。字体类型有两类：点阵字体和矢量字体。现在使用最广泛的是矢量字体。矢量字体又为分为Type1（Adobe）、TrueType（Apple+Microsoft）、OpenType（Adobe+Apple+Microsoft）三种。

在矢量字体文件里，每个unicode仅是编码的索引。每个字符描述信息是一堆矢量绘图描述信息，以Type1为例，它使用三次贝塞尔曲线来描述字形，TrueType则使用二次贝塞尔曲线描述字形。由于矢量字体是绘制出来的，所以它可以实时填充任意颜色，可以无极缩放而没有锯齿。

回到我们的矢量字体图标方案上来。既然字符可以在字体文件里定义，图标为什么不可以呢？我们可以定义任何一个矢量图形，与一个unicode对应，哪怕这个unicode在其它字体中已被使用也没有关系。只要使用的是这个字体，这个文件，渲染出来就是我们提交的矢量图形效果。

阿里巴巴的图标网站iconfont.cn，不仅提供常用图标下载，还提供自定义矢量图标字体的生成与下载。假如我们搜索“sun”，查找到如下所示“晴”这个图标。

是它的unicode编码，上面是生成的字体文件。这些字件文件除svn之外，都是矢量格式。eot是微软IE转用的OpenType类型；woff与woff2是移动开发专用的矢量字体格式，是对三种矢量字体格式的再封装；ttf是TrueType字体。之所以在css里链接这么多字体文件，是为了兼容不同的浏览器。

把上面这段css代码拷贝至wxss样式文件中，再定义两个图标类，如下所示：

@font-face {  ...
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sun:before {
  content: "\e603";
  color: red;
  font-size: 20px;
}

其中iconfont是为了引用字体”iconfont”，icon-sun是为了定义unicode。

在wxml文件内这样使用：

<!-- 使用iconfont图标 -->
<view style="font-size:17px;">
  文本文本文本<text class="iconfont icon-sun"></text>文本文本文本文本文本文本文本文本文本文本<text class="iconfont icon-sun"></text>

</view>

在两个text组件上使用了两次自定义的图标样式。效果如下：

假如我们想自定义图标怎么办？

对于“晴”这个图标，在iconfont这个网站上可以直接进行简单的编辑，包装位移、大小、旋转、颜色等设置。

如果想进行复杂的编辑，可以将矢量图下载下来，使用矢量图编辑软件，例如Sketch，进行编辑，编辑完成后导出svg格式，在上面这个位置上传，就可以替换原图标。

这是使用矢量字体图标的方案。

D）还有一个方案，是使用css3绘制。举个例子：

/* 使用css3绘制图标 */
.icon-close {
  display: inline-block;
  width: 17px;
  height: 2px;
  background: red;
  transform: rotate(45deg);
}

.icon-close::after {
  content: '';
  display: block;
  width: 17px;
  height: 2px;
  background: red;
  transform: rotate(-90deg);

}

这是一个简单的使用css3绘制的图标样式。wxml代码为：

<!-- 使用css3绘制图标 -->
<view style="font-size:17px;margin-top:20px;">
  文本文本文本<text class="icon-close"></text>文本文本文本文本文本文本文本文本文本文本<text class="icon-close"></text>

</view>

运行效果如下：

这种方案每个图标都需要写css样式，劳动量大。即使是别人写好了样式，批量引入进来，也有不便控制的问题。它本身并不是字符，如果每个图标在绘制时没有一个统一的中心点，在使用时仅控制位置就比较麻烦。

E）最后，还有一个方案，就是使用svg。svg是一种矢量格式，内容和矢量字体描述字符的信息类似，可以让图标随意缩放，没有锯齿。在前面我们从iconfont网站下载的css代码中，最后一行其实就是svg格式的文件：

@font-face {
  ...
  url('//at.alicdn.com/t/font_1716930_zt7ou23vy.svg#iconfont') format('svg');
}

svg可以赋值给img标签，也可以用作声明字体。并且它不需要合成字体转换格式，它是一个xml格式的文本文件，还可以在Sketch等矢量软件中直接编辑。查看一下上面这个svg文件的内容：

主要内容是那一长串坐标信息。

使用svg这种方案，避免了格式转换，svg信息可以作为文本直接内嵌于程序中，不存在浏览器加载字体文件格式兼容的问题。简单方便，依赖少，因此它是Web开发中图标方案的首选。

这五种图标方案，你认为微信小程序采用的是哪种方案呢？欢迎留言讨论。

3）微信小程序图标能不能自定义，如何使用阿里图标库？

默认图标不够用，又不想用图片，有没有方法自定义图标？

如前面问题2所讲，可以采用svg方案，在iconfont.cn网站上生成自己的svg文件，下载并在小程序中使用。

甚至在上面的代码中，定义text标签上的图标：

<text class="icon-close"></text>

可以直接改用icon标签：

<icon class="iconfont icon-sun"></icon>
<icon class="icon-close"></icon>

图标是自定义的，但依然保持了代码的优雅。

4）有时间真机上显示icon空白，不正常显示的问题

这是在社区上看到的问题，有人说类似下面这样的代码：

在直机上测试，icon显示不出来。

这一看就是使用了自定义图标。码农亲自以下面的代码做了测试：

<!-- 使用变量传递图标样式 -->
<view style="margin-top:20px;">
  <icon class="iconfont {{iconName}}"></icon>
</view>

iPhone 6s直机上测试，可以，没有问题。

没有这种问题的原因，可能有两个：

a）css font-face样式里声明的字体文件，在安全域名里，在本地不校验域名的情况下可以访问，在真机或真实环境中不行。

b）即使是真机，各种手机微信内嵌的浏览器内核也存有差异，不排除是字体文件的兼容性问题。可以将svg以外的字体格式全部删除，尤其是排在前面的。

如果遇到了类似的问题，可以用这两个方法试一下，如果仍然有问题，欢迎找我讨论。

5）weui组件库里的icon组件的图标，如何取出来，保存到本地？

这是 weui.io/#icons 里的图标样式，有人觉得好看，想把文件拿出来用。有两个方法：

a）通过谷歌浏览器开发者工具，定位到具体组件的样式：

可以看到url指向的是一个内嵌的svg矢量图数据。在新的tab页中打开，可以直接保存为svg文件，在Sketch软件中编辑。

b）weui的图标，微信团队给出了Sketch设计原稿，可以在这个页面下载：

developers.weixin.qq.com/miniprogram/design/#设计

阶段源码：