小程序原生的icon组件，只支持不到10个类型，那么如果我们需要更多的类型怎么办？如何实现图标的自定义？在阿里巴巴的图标网站上，有上百种甚至更多个图标，都是可以免费使用的，我们可以把这些图标用于小程序当中吗？答案肯定是可以的。
有人说图标不够用，可以直接使用图片。
使用图片也是可以的，但是这会有三个问题。一，图片在文本里面不方便布局；二，图片不能伸缩，放大之后会变虚有锯齿；三，图片需要在本地或网络上存储，使用起来不如图标只使用一个名称那么方便。
这节课我们就看一看，如何自定义实现图标，再了解一下自定义图标都有哪些方案。
代码语言：javascript复制//developers.weixin.qq.com/miniprogram/dev/component/icon.html<icon type="success" size="30px" color="green" />type类型范围：'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'片2
我们看一下，上面是微信小程序官方 icon 组件的文档网址。下面是这个组件的示例代码。这个组件属性是很简单的，一共只有三个属性：
1，type表示图标类型，目前只支持9种。
2，size表示大小，支持两种单位，rpx与px。如果值是数值类型，就是在默认使用px单位。rpx 是responsive pixel的简写，是屏幕自适应单位。rpx把屏幕分为750个单位，每个单位是1/750。在iPhone6机器上，屏幕宽度是350px，那么每个rpx就等于0.5个pixel。在iPhone6机器上，如果将size的值设置为60rpx，和30或30px，效果是一样的。
3，color是颜色样式，和css里面的color值定义是一样的
这里有一个关于color属性的问题需要注意，当我们改变一个图标的颜色时，我们改变的是什么呢？
改变的其实是它的所有像素的颜色。因为本质上图标它是一个像素的结合，为了更好的说明这个问题，我们看一段代码。
代码语言：javascript复制<icon type="success" size="100rpx"/><icon style="background:grey;" type="success" size="100rpx"/>
片3
上面是代码，下面是运行效果。第一行代码，当我们没有给组件设置背景样式的时候，图标中间那个对勾是白色的，但其实这个白色不是图标的颜色。第2行代码，当我们设置了背景颜色为灰色时，我们看到那个中间的对勾变成了灰色。也就是说，图标它中间那个部分是镂空的，我们说color改变的是图标所有像素的颜色，其中是不包括中间镂空的那个部分的。
接下来我们看相关问题。
代码语言：javascript复制1，图标能否与文本同行，放在一个段落中？片4
这是开发者社区上的一个问题，答案是可以的。图标之所以作为一个独立的组件存在，就是方便它和文本放在一起布局。具体的代码及运行效果，可以查看这节课的源码。
代码语言：javascript复制2，自定义实现icon图标的方案有哪些，原理是什么？片5
在html中是没有icon标签的，小程序基于浏览器引擎渲染，那么它的icon组件是怎么实现的呢？
简单总结一下，大概有五个方案
第一种方案，使用图片。这是最简单粗暴的方法，每个图标对应一个图片。但是这种方法有三个明显的缺点：一，如果图标多的话，会造成大量http请求；二，不方便修改颜色；三，图标放大会变虚。
第二种方案，使用精灵图。
什么是精灵图？
这是一个字译。精灵图的英文叫Sprites，Sprite有精灵的意思，所以翻译成中文就是精灵图了。更确切的意译，应该是连续图片集。
精灵图是把一组图片以非重叠、最小化分布的方式，排列成一张图片，在加载的时候只加载一次，这就减少了http请求。
片6
看一下，这就是一张精灵图。它的信息描述的是一个爆炸效果，通过控制每次显示的纵横起点坐标及区域大小，就可以展示一个爆炸动画了。将这种技术应用于图标也是可以的。
