微信小程序使用阿里巴巴iconfont矢量多色图标

原生微信小程序使用阿里多色iconfont图标

前言：能解决iconfont图标的只有下载png，还有使用symbol解决，但是如果都使用png会大大增加代码体积和加载速度，symbol有兼容问题，各有各的坏处吧.

先看看多种引用

引用方式	支持多色	兼容性
unicode	❌	好
font-class	❌	良好
symbol	✔	差
png	✔	好

• 虽然unicode和font-class很好，但你会发现都不支持多色模式，就是原来很好看的多色模式，引用后在我们的网页上只是黑白色的，不是很好看；png虽然可以，没有兼容问题，但是会增加代码包加载速度，如果用的在线链接我就不说了…下来是小程序中使用symbol。

mini-program-iconfont-cli(原生小程序iconfont解决方案)

• 把iconfont图标批量转换成多个平台小程序的组件。不依赖字体，支持多色彩。

1. 特性

1. 纯组件
2. 不依赖字体文件
3. 支持px和rpx两种格式
4. 原样渲染多色彩图标
5. 图标颜色可定制

2. 步骤（1）

• 终端执行，安装上面的插件

// Yarn
yarn add mini-program-iconfont-cli --dev

//Npm
npm install mini-program-iconfont-cli --save-dev

步骤（2）

• 生成配置文件

npx iconfont-init

• 此时项目根目录会生成一个iconfont.json的文件，内容如下：

{
  "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接",
  "save_dir": "./iconfont",
  "use_rpx": false,
  "trim_icon_prefix": "icon",
  "default_icon_size": 18
}

• 以上json参数说明:
  1. symbol_url
  请直接复制iconfont官网提供的项目链接。请务必看清是.js后缀而不是.css后缀。如果你现在还没有创建iconfont的仓库，就去仓库点击查看在线链接->生成链接，注意：一定要先在新窗口打开，复制完整链接
  

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

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

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

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

步骤（3）

• 开始生成小程序标准组件(默认iconfont)

//微信小程序
npx iconfont-wechat

生成后查看您设置的保存目录中是否含有所有的图标

步骤（4）

• 微信小程序 | QQ小程序
• 在根目录 的app.json文件中引入全局图标组件，避免每个page都引入（麻烦）

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

使用：name在iconfont.wxml看

在page中使用图标

<!--原色彩  -->
<iconfont name="alipay" />

<!--单色：红色  -->
<iconfont name="alipay" color="red" />

<!--多色：红色+橘色  -->
<iconfont name="alipay" color="{{['red', 'orange']}}" size="300" />

<!--不同格式的颜色写法  -->
<iconfont name="alipay" color="{{['#333', 'rgb(50, 124, 39)']}}" />

<!-- 与文字对齐  -->
<view style="display: flex; alignItems: center;">
  <text>Hello</text>
  <iconfont name="alipay" />
</view>

步骤（5）

当您在iconfont.cn中的图标有变更时，只需更改配置symbol_url，然后再次执行步骤3即可生成最新的图标组件

// 修改 symbol_url 配置后执行：

npx iconfont-wechat

参考：阿里巴巴iconfont官方文档

如果有帮助到小伙伴的，点个赞+收藏呗

更多推荐：wantLG的《解决npm error:npm : 无法加载文件 D:\DevPath\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅…》

---

• 作者：wantLG
• 本文源自：wantLG的《普歌-码上鸿鹄团队:微信小程序使用阿里巴巴iconfont矢量多色图标》
• 本文版权归作者和优快云共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。