微信小程序 Iconfont 图标组件转换工具: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:未指定尺寸时,图标的默认大小。
使用这些配置,你可以根据自己的项目需求调整图标转换的方式。完成配置后,只需运行转换命令即可将图标集成到你的微信小程序项目中。