关于微信小程序图标icon的五种实现方案

关于图标icon

微信小程序中的 icon 组件只有 9 种类型 success、success_no_circle、info、warn、waiting、cancel、download、search、clear。
只有9个类型的图标往往是不够的，需要拓展更多的icon组件图标。

第一种方案 直接使用图片（简单粗暴）

缺点:

1. 图片在文本里面不方便布局；
2. 图片不方便修改颜色；
3. 图片不能伸缩，放大之后会变模糊，不美观；
4. 图片需要在本地或者网络上存储，使用起来不如图标一个名称方便；
5. 如果图标太多，产生大量大HTTP请求；

第二种方案 使用精灵图Sprite

精灵图是以非重叠、最小化分布的方式排列成一张图片，加载的时候只加载一次，减少HTTP请求

第三种方案 使用CSS样式绘制

缺点

1. 工作量大；
2. 绘制时，需要统一一个中心点，否则控制位置比较麻烦；
3. 不方便控制大小、颜色；

第四种方案 使用矢量字体（最简单有效）

矢量字体分为三类

• Adobe 的 Type1
• Apple 和 Microsoft 主导的 TrueType
• Adobe Apple Microsoft 共同主导的开源字体 OpenType

阿里巴巴的图标网站 ： Iconfont-阿里巴巴矢量图标库
提供常用图标下载，还提供自定义矢量图标字体的生成与下载

第五种方案 使用矢量SVG文件

SVG（Scalable Vector Graphics）是基于 XML 的一种矢量图形格式，它即可以作为单独的图形文件使用也可以嵌入到网页中并由 JavaScript 来操作，非常方便和灵活。

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和XSL 之类的 W3C 标准是一个整体