Taro项目引入iconfont 更新 iconfiont

实现需求： 在Taro框架编译成的微信小程序/支付宝小程序等中使用iconfont图标

推荐插件 taro-iconfont-cli

老样子第一步、安装插件直接下载

npm install taro-iconfont-cli --save-dev

第二步

生成配置文件

npx iconfont-init

配置文件大概内容

{

  "symbol_url": "//at.alicdn.com/t/font_937195_r92oas7kdg.js",
// "symbol_url":这里着重强调一下，复制 http://iconfont.cn 官网提供的JS链接
  
  "save_dir": "./src/components/iconfont",
// 配置生成的iconfont图标生成到哪个文件 

  "use_typescript": true,
//如果项目使用Typescript编写，请设置为true。这个选项将决定生成的图标组件是.tsx还是.js后缀。

  "platforms": ["weapp", "h5"],
 // 选择需要支持的平台，默认是*，意味着所有平台都需要支持（如果有）
 //如果你只想支持部分平台，也可以设置成数组：

  "use_rpx": false,
 // 是否使用尺寸单位rpx还是普通的像素单位px。默认值为true，
 // 与Taro保持一致的缩放。您也可以设置为false，强制使用px
 
  "trim_icon_prefix": "icon",
  // 如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过这种配置这个选项把前缀统一去掉。
 //  （图二解释）
 
 "default_icon_size": 18
//生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。
}

注意不是css路径哦(图一)

这样就可以少写icon这些字符啦(图二)

第三步

npx iconfont-taro

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

这里就是我生成的文件啦，直接 import 导入使用即可

总结

https://github.com/iconfont-cli/taro-iconfont-cli/blob/v2.1.0/README.md