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


# 1. 准备工作
//->小程序开启使用npm模块;
//->小程序项目根目录不要有iconfont目录,否则会清空里面所有内容;
//->有nodejs环境;

# 2. 第一步: 在小程序项目根目录,使用npm安装mini-program-iconfont-cli插件;
yarn add mini-program-iconfont-cli --dev  // 或 npm install mini-program-iconfont-cli --save-dev

# 3. 第二步:生成json配置文件
npx iconfont-init
// 这个时候项目根目录会生成一个iconfont.json文件
//-> 其中symbol_url   ---   复制iconfont官网你的项目的Symbol链接
{
    "symbol_url": "//at.alicdn.com/t/font_2671549_fuvl52bnlzb.js",
    "save_dir": "./components/iconfont",
    "use_rpx": false,
    "trim_icon_prefix": "icon",
    "default_icon_size": 18
}


# 4. 第三步: 生成小程序组件,注意此操作会清空并替换已有的iconfont目录,因此注意备份数据(没有此目录可忽略)
npx iconfont-wechat

# 5. 第四步
//注册iconfont组件并使用
//可以在app.json文件中引入全局图标组件,避免每个page都去引入,这样就麻烦。
{
    "usingComponents": {
        "iconfont": "/components/iconfont/iconfont"
    }
}

# 6. 第五步: 在wxml中的使用方法
<iconfont name="fenlei"></iconfont>

# 7. 更新iconfont图标操作
//-> 每次更新图片会生成新的js,因此你需要在json替换掉这个新的js地址,然后执行:
npx iconfont-wechat

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

子兮曰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值