关键词：
把 iconfont 图标批量转换成多个平台小程序的组件。不依赖字体，支持多色彩。
0 支持平台
- 微信小程序
- 支付宝小程序
- 百度小程序
- 头条小程序（字节跳动）
- 快手小程序
- QQ小程序
1 安装插件
npm install mini-program-iconfont-cli -D
2 生成配置文件
npx iconfont-init
会在根目录生成 iconfont.json 文件：
"symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接",
"save_dir": "./iconfont",
"use_rpx": false,
"trim_icon_prefix": "icon",
"default_icon_size": 18
配置参数说明
- symbol_url
请直接复制iconfont官网提供的项目链接。请务必看清是.js后缀而不是.css后缀。如果你现在还没有创建iconfont的仓库，那么可以填入这个链接去测试：https://at.alicdn.com/t/c/font_666306_xz8cl133jq.js
- save_dir
根据iconfont图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。 - use_rpx
使用微信提供的尺寸单位rpx还是普通的像素单位px。默认值为false，即使用px。 - trim_icon_prefix
如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过配置这个选项把前缀统一去掉。 - default_icon_size
我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。
3 生成小程序标准组件
# 可传入配置文件路径
# npx iconfont-XXXXX --config iconfont.json
# 微信小程序
npx iconfont-wechat
# 支付宝小程序
npx iconfont-alipay
# 百度小程序
npx iconfont-baidu
# 头条小程序
npx iconfont-toutiao
# 快手小程序
npx iconfont-kuaishou
# QQ小程序
npx iconfont-qq
如生成微信小程序，会在根目录生成对应的文件：
4 配置全局iconfont组件
在根目录的app.json文件中引入全局图标组件，避免每个page都引入。
"usingComponents":
"iconfont": "./iconfont/iconfont"
其他小程序不支持全局引入，您需要在各自page的.json文件中引入。
5 在page中使用图标组件
// 原色彩
<iconfont name="alipay" />
<iconfont name="fuwu-01-01" />
// 单色：红色
<iconfont name="alipay" color="red" />
// 多色：红色+橘色
<iconfont name="alipay" color="['red', 'orange']" size="300" />
// 不同格式的颜色写法
<iconfont name="alipay" color="['#333', 'rgb(50, 124, 39)']" />
// 与文字对齐
<view style="display: flex; alignItems: center;">
<text>Hello</text>
<iconfont name="alipay" />
</view>
6 更新图标
当您在iconfont.cn中的图标有变更时，只需更改配置symbol_url，然后再次生成最新的图标组件。
# 修改 symbol_url 配置后执行：
# 微信小程序
npx iconfont-wechat
微信小程序中引入图标
...码第六步在小程序项目中新建文件目录如下将代码复制到iconfont.wxss中在具体页面使用时要将他引入到具体页面的wxss中wxml中使用直接添加具体的图标class类 查看详情
页面添加iconfont字体-[超详细]-支持彩色(代码片段)
...图官网为例,因为图标丰富,方便使用.注册请点:https://www.iconfont.cn/ ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 第二... 查看详情
微信小程序封装路由mini-router
参考技术A目前mini-router支持微信小程序里的路由的所有方法，函数名对比:当你输入一个在pages模块中找不到的路由时(log)，mini-router会抛出错误，例如：mini-router内置了一个属性params，它会根据你跳转的页面，动态的更换当前属性... 查看详情
uni-app中使用svg彩色图标
参考技术A1.iconfont.cn中找到喜欢的图标添加至项目2.找到项目选择Symbol选项3.点击js在新窗口打开，全选复制4.在uniapp项目新建svg.js，粘贴复制过来的js5.在main.js中导入svg.js文件6.在页面中使用icon-caomei为svg对应的id7.效果8.调整图标... 查看详情
引用彩色图标(代码片段)
第一步：引入项目下面生成的symbol代码：<scriptsrc="./iconfont.js"></script>第二步：加入通用css代码（引入一次就行）：<styletype="text/css">.icon/*通过设置font-size来改变图标大小*/width:1em;height:1em;/*图标和文字相邻时，垂直对... 查看详情
#yyds干货盘点#愚公系列2022年11月微信小程序-icon图标详解(代码片段)
前言在小程序中经常会用到各种各样的图标，如果这些图标都使用图片的话，将会大大增加小程序打包后的体积，而小程序限制代码最大2MB，分包加载4MB，所以为了缩小体积，我们可以使用图标来缩小体积。使用图标有两种方式... 查看详情
微信小程序底部导航图标如何设置大小
参考技术A1、新建一个微信小程序0607，完成后，大致架构如图。2、打开app.json，在其中配置topbar，如图，红色部分表示的代码；注意：绿色处的逗号，不可省略。3、上图代码运行后，即可看到添加的底部导航，如图。4、在app.jso... 查看详情
如何使用iconfont？——矢量图标
...面深度解析前端知识/技能，本篇分享的是：【如何使用IconFont？——矢量图标】?1.背景介绍网上的一些小图标除了可以使用css精灵图制作外，还可以使用现在比较热门的iconfont去制作。那么首先搞清楚一个问题，什么是iconfont？ic... 查看详情
微信小程序icon图标使用详解(代码片段)
...你迷茫的同时，保持本心，过好今天就好。icon在微信小程序中用来显示图标。1icon图标的基本使用<viewclass="container"><viewclass="icon-box"><iconclass="icon-box-img"type="success"size="... 查看详情
引入阿里在线图标（微信小程序）
https://www.bilibili.com/video/BV1WJ41197sD?p=49 查看详情
关于阿里云图标库---iconfont的使用
...会涉及到页面的布局，还有图标字体的使用。当时发现了iconfont这个神奇，恰好有个小姐姐说也想学一学，所以写一篇这个博文推荐给大家。iconfont官网传送门：http://www.iconfont.cn/下面进入正题： 第1步进入百度，输入iconfont.然... 查看详情
使用字体图标(使用iconfont的unicode模式)
参考技术A注意：一定要加类名：class="iconfont",否则图标不出来会显示出一个x号 查看详情
记录uni-app开发微信小程序踩过得坑，包括iconfont不显示v-if插槽上不生效pdf在线预览等(代码片段)
uni-app开发微信小程序踩过得坑项目说明一、iconfont图标不显示二、v-if在插槽上不起作用三、uView组件上定义的样式不生效四、PDF在线预览方案项目说明项目采用uni-app+uView框架，一套代码，发布成APP和微信小程序两端。... 查看详情
iconfont字体图标的使用方法
...ap比较多,所以使用fontawesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走... 查看详情
flutter使用阿里iconfont图标(代码片段)
1.将下载的iconfont.ttf复制到项目fonts目录2.配置pubspec.yaml文件，将字体文件引入fonts:-family:iconfontfonts:-asset:fonts/iconfont.ttf3.IconData使用图标//查看iconfont.css，将替换成0x即可得到对应的codePoint//.icon-ai-ios:before//content:"e631";////IconData(0xe63... 查看详情
layui使用iconfont(代码片段)
layui的图标取自于阿里巴巴的矢量图标库Iconfont，同样的，这篇教程也是基于Iconfont进行扩展。第一步，通过浏览器打开http://iconfont.cn/，访问阿里巴巴矢量图标库。第二步，通过右上角的用户图标，授权登陆一个账号，在此我选... 查看详情
iconfont采坑
1.iconfont采坑1.1.前言使用iconfont过程中踩过坑特此记录不知道iconfont的这里也简单介绍一笔，阿里开放的一个图标素材库，用来快速找图标下载使用图标iconfont网址1.2.所谓单色iconfont中有些图标，看着是单色的，也就是整体单色，... 查看详情
nuxt使用iconfont矢量图标(代码片段)
...但是总感觉这样不太好。这个时候我们可以使用 Iconfont-阿里巴巴矢量图标库 下面就讲一讲怎么在nuxt中使用iconfont 一、普通没有颜色的矢量图标1.到iconfont找好自己想要的图标，然后下载到本地 下载... 查看详情