阿里图标库symbol使用手册【小程序】

大家好，欢迎来到IT知识分享网。

准备工作

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

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

3、有nodejs环境；

第一步

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

// 1.Yarn方式 yarn add mini-program-iconfont-cli --dev // 2.Npm方式 npm install mini-program-iconfont-cli --save-dev 

第二步

生成json配置文件

npx iconfont-init

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

{ "symbol_url": "//at.alicdn.com/t/xxxxxxxxxxxx.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：

如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过这种配置这个选项把前缀统一去掉。例如图标名是icon-wangzhan，按以上设置iconfont中的属性name则写成：name=”wangzhan”。

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 name="iconwangzhan" color="#999" size="54" isStr="false"></iconfont> /*彩色图多色值*/ <iconfont name="iconwangzhan" color="{ 
  {['#FF4A38','#ffffff']}}" isStr="false" size="54" isStr="false"></iconfont> <iconfont name="iconwangzhan" color="#999" size="54" isStr="false"></iconfont>

更新iconfont图标操作

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

npx iconfont-wechat