微信小程序使用阿里iconfont

相威
2023-12-01
  1. 安装npm
  2. 验证:npm -i
  3. 删除原始宽高
    1. 文件:node_modules/mini-program-iconfont-cli/libs/generateWechatComponent.js
    2. 27行,换成:
      svgTemplates.push("<!--" + iconIdAfterTrim + "-->\n<view wx:if=\"{{name === '" + iconIdAfterTrim + "'}}\" style=\"background-image: url({{quot}}data:image/svg+xml, " + generateCase(item) + "{{quot}});" +
          ' " class="icon" />');
  4. 设定原始宽高
    1. 文件: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;
      }
  5. 替换根目录下iconfont.json文件链接内容:
    1. {
          "symbol_url": "https://at.alicdn.com/t/font_26mnvjep.js",
          "save_dir": "./iconfont",
          "use_rpx": false,
          "trim_icon_prefix": "",
          "default_icon_size": 18
      }
  6. 运行命令:npx iconfont-wechat
 类似资料: