阿里图标库symbol使用手册

准备工作

1、小程序开启使用npm模块；

2、小程序项目根目录不要有iconfont目录，否则会清空里面所有内容；

3、有nodejs环境；

第一步

在小程序项目根目录，使用npm安装mini-program-iconfont-cli插件；

// Yarn
yarn add mini-program-iconfont-cli --dev
 
// Npm
npm install mini-program-iconfont-cli --save-dev

第二步

生成json配置文件

npx iconfont-init

这个时候项目根目录会生成一个iconfont.json文件

{
    "symbol_url": "//at.alicdn.com/t/font_3245042_56u7a7s4h06.js",
    "save_dir": "./iconfont",
    "use_rpx": true,
    "trim_icon_prefix": "icon-",
    "default_icon_size": 24
}

其中symbol_url — 复制iconfont官网你的项目的Symbol链接

symbol_url：

官网提供的项目链接。请务必看清是.js后缀而不是.css后缀。

具体操作步骤： 在我的项目中 点击Symbol => 查看在线链接 => 点击复制代码 即可

save_dir：

根据iconfont图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。

use_rpx：

是否使用微信提供的尺寸单位rpx还是普通的像素单位px。默认值为false，即使用px

trim_icon_prefix：

如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过这种配置这个选项把前缀统一去掉。

default_icon_size：

我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。

第三步

生成小程序组件，注意此操作会清空并替换已有的iconfont目录，因此注意备份数据（没有此目录可忽略）

npx iconfont-wechat

第四步

注册iconfont组件并使用

可以在app.json文件中引入全局图标组件，避免每个page都去引入，这样就麻烦。

// 绝对路径
{
    "usingComponents": {
        "iconfont": "/iconfont/iconfont"
    }
}

第五步

在wxml中的使用方法：

color：颜色，默认是字符串，当isStr设置为false时可传数组；

size：大小，默认单位为px，当iconfont.json中的use_rpx为true时单位为rpx；

isStr：color传值格式是否为字符串，默认true；

<iconfont name="iconwangzhan" color="#999" size="54" isStr="false"></iconfont>

更新iconfont图标操作

每次更新图片会生成新的js，因此你需要在json替换掉这个新的js地址，然后执行：

npx iconfont-wechat