微信小程序中实现Icon组件的四种方式

一个标准组件，但是该组件只有10种类型（, __, , , , , , , ），并且只能控制大小和颜色。

在日常实际中，这个组件就显得非常不够用了，大家难免会需要自定义一些组件。这里告诉你实现四种自定义组件的方式

一、图片

利用小程序的标签就自定义的。

优势：这种方式通过图片，然后对其设置宽高便能实现想要的。

劣势：这种图片修改颜色只能换图，并且图片缩放过大后容易失真，并且图片会占用一次请求

二、方式

通过图片实现自定义。

优势：相比上一种方式，图片可以修改颜色，并且缩放的失真率也比较低。劣势：小程序并不支持加载本地的图片。但我们可以通过在线()转64的方式在中加载图片

三、方式

小程序原生支持3。所以可以通过3方式实现自己想要的自定义。

优势：仅用代码便可以绘制一些基础的图形，网上可参考的代码也不少

劣势：这种方式实现一些比较复杂的比较困难，代码量较大

四、字体文件方式

微信小程序支持加载远程字体文件，然后通过字体图标实现自定义。

优势：这种方式比较便捷，图标种类繁多，而且修改样式也比较灵活。比如我们可以选择阿里巴巴矢量图标库(.)可以在线选择想要的图片，并且可以修改样式，然后生成的字体文件。也可以选择字体库()生成字体文件，然后再通过加载改字体文件便能实现自定义。

劣势：需要字体文件支持，会增大小程序体积。如果使用外链字体，对外链稳定有要求

以上几种方法也同样适用于-小程序的。

这几种方法，追格小程序系列产品中均有应用，结合不同使用场景，使用适合的方式即可。