微信小程序之阿里图标库icon的symbol引入无需下载支持彩色图标

创建项目，将需要的图标加入项目中

symbol方式引入优势

支持多色图标了，不再受单色限制。
标签自带size属性，也可以通过css调整样式（使用过程中，在电脑上打开微信小程序，样式会有偏）。不过不影响手机端使用。

使用步骤

1.微信小程序开发工具，项目的根目录，鼠标右键，打开终端，输入 npm init -y（会多一个package.json文件）
2.输入npm install mini-program-iconfont-cli --save-dev（会多一个node_modules，不会被上传）
3.输入npx iconfont-init 会出现help提示

此时插件会在项目根目录下生成配置文件 iconfont.json，内容如下

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

我们需要将 symbol_url 的值修改为图标官网给的 Symbol 链接；

4.生成图标，输入npx iconfont-wechat

执行完成后，在项目根目录会生成iconfont图标目录

图标的使用

1.在页面 app.json 文件中引用组件，注意 iconfont 组件路径；

2.在页面中使用

name为图标名称，参考iconfont.wxml中的图标name配置

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_28016751/article/details/123692010
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2023-01-03 19:56:35
阅读 ( 266 )
分类：职场