微信小程序使用iconfont图标方法（推荐）

1. 安装 iconfont 转换工具

npm install mini-program-iconfont-cli --save-dev

2. 执行下面命令生成配置文件：

npx iconfont-init

这将在项目根目录生成一个 iconfont.json 文件，内容如下：

{
"symbol_url": "//at.alicdn.com/t/font_xxxxxx.js",
"save_dir": "./components/iconfont",
"use_rpx": true,
"trim_icon_prefix": "icon",
"default_icon_size": 32,
"component_name": "iconfont"
}

配置文件注释如下：
symbol_url: 你的 Iconfont 项目 JS 链接
save_dir: 生成的组件保存目录
use_rpx: 是否使用 rpx 单位
trim_icon_prefix: 去除图标前缀
default_icon_size: 默认图标大小
component_name: 组件名称

3. 执行对应命令生成小程序组件

// 微信小程序
npx iconfont-wechat
// 支付宝小程序
npx iconfont-alipay
// 百度小程序
npx iconfont-baidu
// 头条小程序
npx iconfont-toutiao
// 快手小程序
npx iconfont-kuaishou
// QQ小程序
npx iconfont-qq

4.使用图标组件

1.在微信小程序中，可以在根目录的 app.json 文件中引入全局图标组件：

{
"usingComponents": {
"iconfont": "/iconfont/iconfont"
}
}

2.在微信小程序WXML页面中使用图标：

// 原色彩
<iconfont name="alipay" />
// 单色：红色
<iconfont name="alipay" color="red" />
// 多色：红色+橘色
<iconfont name="alipay" color="{{['red', 'orange']}}" size="300" />