1）原生支持哪些类型
小程序的icon支持以下类型：
代码语言：javascript复制'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'对应图像效果依次为：
主要失败、成功状态的提示，加三个下载、搜索、关闭图标。
2）示例与属性
图标使用的代码示例为：
代码语言：javascript复制<icon type="success" size="30px" color="green" />图标共有三个属性：
属性 | 说明 |
|---|---|
type | 图标类型，有效值在上面已经讲过了 |
size | 大小，支持两种单位，rpx与px。如果值是数值类型，默认使用px单位。 |
color | 图标的颜色，css支持的颜色格式都可以使用 |
3）图标与图片有什么不同
通过size属性，可以改变图标的大小：
使用图片也可以达到同样的效果，但是图片如果像素不够，放大了之后效果会虚；还有，图片需要另外存储与加载，使用起来不如图标只使用一个名称方便；再者就是，接下来会看到，图标可以随意改变颜色，而图像不能。
4）color改变的是像素的颜色
图标可以看作是一些像素点区域的集合，至于这些像素点是什么颜色，是由color属性决定的。像上面绿色的success图标，它的默认色是绿色，中间对勾部分是镂空的。如果我们给图标所在的容器一个背景色，那么对勾呈现的就是背景的颜色：
代码：
代码语言：javascript复制<view class="group" ==style="background:grey;"==>
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}px"/>
</block>
</view>我们可以通过color属性随意改变图标颜色：
但是中间对勾的颜色同时改变不了，因为它是由背景决定的。
下面看一下与图标有关的问题：
1）图标能否与文本同行，放在段落中？
可以。效果：
代码：
代码语言：javascript复制<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请求。
在使用的时候，能过背景图片的定位与裁剪呈现某一块区域的图标，代码如下：
代码语言：javascript复制<style type="text/css">
.icon{
width: 68px;//控制裁剪区域大小
height: 30px;
background: url("sprites.png") -877px -201px;//定位位置
}
</style>精灵图解决了http请求过多的问题，但是它的颜色不能改变，放大会图片会变虚。
C）这两个问题由矢量字体图标方案解决了。当浏览器渲染一个汉字（英文字符也是一样）的时候，首先看font-family样式，确定字体名，由字体名确定使用电脑里的哪个字体文件；接着以汉字的unicode在字体文件里查找对应的字符信息。
每个字符都有一个唯一的unicode编码，例如“小程序”这三个汉字的unicode为“u5c0fu7a0bu5e8f”。每个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样式文件中，再定义两个图标类，如下所示：
代码语言：javascript复制@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文件内这样使用：
代码语言：javascript复制<!-- 使用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绘制。举个例子：
代码语言：javascript复制/* 使用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代码为：
代码语言：javascript复制<!-- 使用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格式的文件：
代码语言：javascript复制@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标签上的图标：
代码语言：javascript复制<text class="icon-close"></text>可以直接改用icon标签：
代码语言：javascript复制<icon class="iconfont icon-sun"></icon>
<icon class="icon-close"></icon>图标是自定义的，但依然保持了代码的优雅。
4）有时间真机上显示icon空白，不正常显示的问题
这是在社区上看到的问题，有人说类似下面这样的代码：
在直机上测试，icon显示不出来。
这一看就是使用了自定义图标。码农亲自以下面的代码做了测试：
代码语言：javascript复制<!-- 使用变量传递图标样式 -->
<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/#设计
阶段源码：
