微信小程序使用Symbol类型彩色图标

流氓凡 技术分享 2021-01-06 5.86 K 2

准备工作

小程序开启使用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文件

image.png

其中symbol_url   ---   复制iconfont官网你的项目的Symbol链接

image.png

第三步

生成小程序组件,注意此操作会清空并替换已有的iconfont目录,因此注意备份数据(没有此目录可忽略)

npx iconfont-wechat

第四步

注册iconfont组件并使用

可以在app.json文件中引入全局图标组件,避免每个page都去引入,这样就麻烦。

// 绝对路径
{
    "usingComponents": {
        "iconfont": "/iconfont/iconfont"
    }
}

第五步

在wxml中的使用方法

<iconfont name="iconwangzhan"></iconfont>

更新iconfont图标操作

每次更新图片会生成新的js,因此你需要在json替换掉这个新的js地址,然后执行:

npx iconfont-wechat



评论

精彩评论