微信小程序使用Symbol类型彩色图标
准备工作
小程序开启使用npm模块;
小程序项目根目录不要有iconfont目录,否则会清空里面所有内容;
有nodejs环境;
第一步
在小程序项目根目录,使用npm安装mini-program-iconfont-cli插件;
// Yarn yarn add mini-program-iconfont-cli --dev // Npm npm install mini-program-iconfont-cli --save-dev
第二步
生成json配置文件
npx iconfont-init
这个时候项目根目录会生成一个iconfont.json文件
其中symbol_url --- 复制iconfont官网你的项目的Symbol链接
第三步
生成小程序组件,注意此操作会清空并替换已有的iconfont目录,因此注意备份数据(没有此目录可忽略)
npx iconfont-wechat
第四步
注册iconfont组件并使用
可以在app.json文件中引入全局图标组件,避免每个page都去引入,这样就麻烦。
// 绝对路径 { "usingComponents": { "iconfont": "/iconfont/iconfont" } }
第五步
在wxml中的使用方法
<iconfont name="iconwangzhan"></iconfont>
更新iconfont图标操作
每次更新图片会生成新的js,因此你需要在json替换掉这个新的js地址,然后执行:
npx iconfont-wechat
评论
奇奇怪怪
回复Vue可以这么用么?
流氓凡
回复@奇奇怪怪 未作测试