如何将矢量字体应用于小程序icon组件，打造个性化图标？

本文共计1477个文字，预计阅读时间需要6分钟。

小程式开发教程栏目介绍：如何自定义小程式icon图标。

问题：微信小程式中，icon组件只有9种类型：success、success_no_circle、info、warn、waiting、cancel、download、search、clear。具体可参考以下内容。

小程序开发教程栏目介绍如何自定义小程序icon组件图标。

一个问题

微信小程序中的 icon 组件只有 9 种类型 success、success_no_circle、info、warn、waiting、cancel、download、search、clear。具体可以参考 icon 组件官方文档。

一个想法

我们往往希望不受上述 9 种图标的限制，拓展 icon 组件的图标。这就涉及到如何自定义图标的问题。自定义图标有多种方法，比如使用图片、精灵图、CSS 样式绘制、SVG 矢量文件等方法。本文着重介绍如何使用矢量字体自定义小程序的 icon 组件图标。

一个概念

什么是矢量字体？

字体包括点阵字体和矢量字体。