iconfont-tools-cli
适用于 iconfont 彩色图标的提取
特性
- 生成原生通用组件 icon
- 生成夸平台可用的 iconfont-weapp.css 文件
- 本地生产,也可以远程生成
如何安装
npm i -g iconfont-tools-cli
# 配置运行命令
"update:iconfont": "node node_modules/iconfont-tools-cli/lib/cli.js --config config/iconfont.config.js --to $INIT_CWD/src/static/css",
参数:
- --config: 项目跟目录的配置文件路径:config/iconfont.config.js
module.exports = {
iconfontUrl: '//at.alicdn.com/t/c/font_4227835_d6w9wq4r0y.js', // 字体文件地址
fontName: 'anterp-icon', // 字体名称
dirName: 'iconfont', // 输出文件夹
fileName: 'anterp-icon',
icon: 'anterp-m', // 图标库名称
fontSize: '16px', // 默认大小
component: false // 是否生成小程序组件
};
- --to: 生成目标路径:$INIT_CWD/src/static/css
小程序 如何使用
- 1.直接引用样式
<view class="t-icon t-icon-your-iconName"></view>
- 2.使用组件 icon
page.json
{
"usingComponents": {
"icon": "/path/to-icon/icon"
}
}
page.wxml
<icon name="IconName" size="{{24}}"></icon>