微信小程序使用阿里iconfont

最新推荐文章于 2024-04-20 18:15:17 发布

巴哥码

最新推荐文章于 2024-04-20 18:15:17 发布

阅读量237

点赞数

本文链接：https://blog.csdn.net/u010879286/article/details/119486669

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何安装npm并修改`mini-program-iconfont-cli`的配置，包括删除原始宽高、设定新宽高以及更新`iconfont.json`文件。通过运行`npx iconfont-wechat`命令，实现微信小程序中图标字体的优化集成。

摘要由CSDN通过智能技术生成

安装npm
验证：npm -i

删除原始宽高

文件：node_modules/mini-program-iconfont-cli/libs/generateWechatComponent.js

27行，换成：

svgTemplates.push("<!--" + iconIdAfterTrim + "-->\n<view wx:if=\"{{name === '" + iconIdAfterTrim + "'}}\" style=\"background-image: url({{quot}}data:image/svg+xml, " + generateCase(item) + "{{quot}});" +
    ' " class="icon" />');

设定原始宽高

文件：node_modules/mini-program-iconfont-cli/templates/wechat.wxss.template

.icon {
  background-repeat: no-repeat;
  width: var(--iconfont-width);
  height: var(--iconfont-height);
  background-size: 100% auto;
}

替换根目录下iconfont.json文件链接内容：

{
    "symbol_url": "https://at.alicdn.com/t/font_26mnvjep.js",
    "save_dir": "./iconfont",
    "use_rpx": false,
    "trim_icon_prefix": "",
    "default_icon_size": 18
}