小程序 icon 图标的实现方案

官方 icon 类型默认有九种：

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

<icon type="success" size="93" color="green"></icon>

官方提供数量太少，其它自定义 icon 方式：

1、使用图片

• 如果图标过多，造成大量HTTP请求；
• 不方便修改颜色；
• 图标放大会变虚；

2、精灵图（Sprite）

• 连续图片集，加载时只加载一次，减少HTTP请求。在使用时，通过背景图片定位和裁剪，只渲染图片的一小片区域。

连续图片集.png sprite.png

3、CSS 样式绘制

绘制一个关闭按钮icon：

.icon_close{
  display: inline-block;
  width: 17px;
  height: 2px;
  background-color: green;
  transform: rotate(45deg);
}

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

• 每次需要手写css代码，工作量大；
• 图标绘制时，需要统一一个中心点，否则使用时控制位置比较麻烦；
• 不方便控制大小、颜色；

4、矢量字体（推荐）

• 矢量图标库 www.iconfont.cn

从 iconfont 中找到需要的图标：

iconfont.png

.wxss 文件

@font-face {
  font-family: 'iconfont';  /* Project id 2563935 */
  src: url('//at.alicdn.com/t/font_2563935_33okfvdpwa8.woff2?t=1621605494968') format('woff2'),
       url('//at.alicdn.com/t/font_2563935_33okfvdpwa8.woff?t=1621605494968') format('woff'),
       url('//at.alicdn.com/t/font_2563935_33okfvdpwa8.ttf?t=1621605494968') format('truetype');
}

.iconfont{
  font-family: 'iconfont';
  font-size: 40px;
  color: red;
}

.icon_people::before{
  content: '\e74b';
}

.icon_heart::before{
  content: '\e8ab';
}

.wxml 文件

<icon class="iconfont icon_people"></icon>
<icon class="iconfont icon_heart"></icon>

效果：

iconfont.png

5、SVG 矢量文件

• 有路径绘制信息的文本描述文件；

• Sketch 软件、photoshop 在线编辑(https://www.uupoop.com)、iconfont 网站都可以导出 SVG 格式文件。Sketch 导出的有冗余信息，例如注释，不简洁；

将 SVG 文件转化为 base64 字符串，在小程序中使用 base64 字符串作为图片源，实现自定义图标。
image 转 base64 工具网址： https://www.sojson.com/image2base64.html

// wxss 
.svg_icon {
  display: block;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background: url("data:image/svg+xml;base64,PHN...Zz4=");
}

// wxml
<icon class="svg_icon"></icon>

• 也可使用 canvas 绘制 SVG 信息，但 canvas 多用于制作动画，用于自定义图标大材小用。腾讯团队编写的 SVG 信息绘制成图像介绍：https://developers.weixin.qq.com/community/develop/article/doc/000ca493bc09c0d03a8827b9b5b013，原理基于 Canvas 绘制。

icon 常见问题

1. icon 图标是可以和文本同行的，放在段落中。
2. 真机上 icon 显示空白。
   如果图标是自定义实现的，要检查机型及嵌入的字体文件类型，可能是兼容新引起的。在小程序中推荐使用 TTF 和 WOFF 格式的字体，如果使用这两种字体问题依然存在，则考虑换 SVG 格式的数据嵌入。