微信小程序 Iconfont 图标组件转换工具：mini-program-iconfont-cli 教程

微信小程序 Iconfont 图标组件转换工具：mini-program-iconfont-cli 教程

mini-program-iconfont-cli把iconfont图标批量转换成多个平台小程序的标准组件。支持多色彩，支持自定义颜色项目地址:https://gitcode.com/gh_mirrors/mi/mini-program-iconfont-cli

1. 项目目录结构及介绍

项目根目录
├── iconfont.json    # 配置文件，用于定义转换规则
├── dist             # 转换后生成的组件目录
│   ├── component    # 存放各个平台的小程序组件
│   └── fonts        # 字体文件目录
└── src               # 用户源代码目录，包含你的iconfont符号链接
    └── iconfont.js   # 若有的话，从Iconfont官网获取的JavaScript库

在这个项目中，iconfont.json 文件是核心配置，它指导 mini-program-iconfont-cli 如何转换图标。dist 目录包含转换后的组件，每个子目录对应不同的小程序平台。src 目录存放原始的iconfont相关资源。

2. 项目的启动文件介绍

尽管 mini-program-iconfont-cli 不涉及运行时应用程序，但有以下几个关键命令行操作：

初始化配置文件

npx iconfont-init

这将在项目根目录生成 iconfont.json 文件。

转换图标

npm run iconfont

或者

yarn iconfont

运行此命令将根据 iconfont.json 的配置，将Iconfont图标转换为小程序可使用的组件。

更新图标

如果有新的图标添加，需要重新执行上面的转换命令。

3. 项目的配置文件介绍

iconfont.json 文件包含了转换的详细设置，例如：

{
  "symbol_url": "http://iconfont.cn/codes/client/js?script&xxxxx", // Iconfont 项目的JS链接
  "save_dir": "./dist/component", // 输出的组件目录
  "use_rpx": true,                // 是否使用rpx单位，默认是true
  "trim_icon_prefix": "icon-",    // 图标名前缀，用于移除
  "default_icon_size": 24         // 默认图标大小，单位为像素
}

• symbol_url：这是从Iconfont官网获取的JavaScript库的URL，确保它是JS格式而非CSS。
• save_dir：转换后组件的保存目录。
• use_rpx：是否使用rpx作为尺寸单位，适用于适应不同屏幕比例的小程序。
• trim_icon_prefix：如果图标名称有特定前缀，可以通过此选项移除。
• default_icon_size：未指定尺寸时，图标的默认大小。

使用这些配置，你可以根据自己的项目需求调整图标转换的方式。完成配置后，只需运行转换命令即可将图标集成到你的微信小程序项目中。

mini-program-iconfont-cli把iconfont图标批量转换成多个平台小程序的标准组件。支持多色彩，支持自定义颜色项目地址:https://gitcode.com/gh_mirrors/mi/mini-program-iconfont-cli