1.如何修改微信小程序的小程序源修改标
2.解决小程序自定义图标问题，一键批量生成图标组件（Taro版）
3.微信小程序开发 | 如何在小程序中使用自定义 icon 图标

如何修改微信小程序的码图标

       1、首先打开微信开发工具，标修载入需要修改的程序小程序工程。

       2、源码然后打开app.json页面，图标8的源码是在window下写下面的小程序源修改代码，先用color和selectedColor设置底部菜单点击前和点击后文字的码图颜色。

       3、标修然后在list中设置两个标签，程序其中使用pagePath和text填写一下点击跳转的源码路径和选项的名字。

       4、图标最后填写点击前的小程序源修改图标和点击后的图标，这里每个选项用两个颜色图标，码图可以去找矢量图，标修尺寸大约在像素左右，亿卡系统源码其中iconPath为点击前的图标，而selectedIconPath为点击后的图标。

       5、最后设置好后，在左侧的预览就可以看到菜单的样式了：

解决小程序自定义图标问题，一键批量生成图标组件（Taro版）

       无需赘述，直接来看效果

       在Taro小程序开发过程中，你是否曾遭遇过图标配置难题？iconfont的不便、字体图标缺乏直观性、颜色不可变、本地图标无法无损缩放，甚至阿里巴巴iconfont矢量图标库的服务不稳定，渐变色支持不足？这些问题迎刃而解，得益于taro-svg-icon-cli这个解决方案。

       这个工具利用SVG（可伸缩矢量图形）的android电量显示源码特性，能直接生成图标组件，它支持调整图标大小和颜色，确保缩放时图像质量不受损。无需依赖在线字体，只需本地SVG文件即可。taro-svg-icon-cli还利用svgo进行无损压缩，生成的SVG XML代码以内联背景图形式呈现，兼容性良好，大部分移动端应用均适用。

       生成的组件具有明确的图标名称，支持代码提示，目前仅针对支付宝、微信小程序进行了编译。灵感来源于taro-iconfont-cli，但实现了本地化的优优影视源码图标编译。

       使用起来相当便捷，安装taro-svg-icon-cli，执行初始化命令生成配置文件，将SVG资源放入指定目录，即可一键生成可使用的图标组件，甚至支持生成TypeScript版本。虽然目前主要适用于微信、支付宝小程序，但扩展到其他小程序或Web端Vue、React应用也相对容易，我们欢迎社区贡献代码或fork。

       想要了解更多？请访问：github.com/leidenglai/t...

微信小程序开发 | 如何在小程序中使用自定义 icon 图标

       题图：来自 Unsplash.com

       本文是微信小程序开发学习笔记。

       微信小程序 icon 组件（标签）只提供了 9 种类型的图标，不能满足开发或设计的个性化需求。为了解决这个问题，传奇 脱机挂源码我们可以使用自定义的 icon 图标，来丰富原有的图标类型。

       在微信小程序中使用自定义 icon 图标有 6 种方法：

       1.使用 icon 图标（特指位图）

       2.使用 Sprite（精灵图）

       3.使用 CSS 样式绘制（这种方法工作量大）

       4.使用矢量字体

       5.使用 SVG 矢量文件

       6.使用 Canvas

       本文只对第 4 种方法进行说明，因为除了第 1 种方法，其他方法我暂时还都不会。

       使用矢量字体来自定义 icon 图标，需要用到阿里巴巴图标库网站 Iconfont。

       题外话，以前我一直以为这个网站只能用于设计，直到接触了一些前端的知识，才知道它也能运用到编程中。

       打开网站，选择一个自己喜欢的图标，将其添加到购物车，类似购物时将商品添加到购物车的操作，重复操作，将你喜欢的图标一一添加到购物车中。

       选择好需要的所有图标后，点击右上角的「购物车」图标。

       浏览器右侧会弹出一个面板，选择「添加至项目」，如果你之前未曾创建过项目，这里就需要新建一个项目，新建项目其实就是新建一个文件夹。

       将鼠标移动到网页顶部的导航栏「图标管理」，在弹出的菜单中，点击「我的项目」。

       在我的项目中，点击「查看在线链接」。

       下方会出现一长串代码，其中的 url 链接指向的就是存放在阿里云服务器的矢量字体，这些字体有不同的格式，如 ttf、woff、woff2，之所以需要用到不同的字体格式，是为了兼容不同的设备或系统。

       接着点击「点此复制代码」，将代码复制到系统剪贴板中。

       回到微信小程序开发者工具中，将代码粘贴到小程序页面的 wxss 文件中，wxss 文件可以类比为普通网页的 css 文件。

       接着在 wxss 文件中进一步定义 icon 图标的样式，输入以下的代码：

       font-family 指定我们嵌入的字体名称，它需要与 @font-face 中 font-family 的值保持一致 ，color 设置图标的颜色，font-size 设置图标的大小。

       icon-heart 和 icon-like 是自定义的类选择器名称（简称类名），你可以根据自己的喜好进行命名，这里的 icon-heart 代表爱心图标，icon-like 代表点赞图标。

       content 指定图标的 unicode 编码，获取图标的编码还需要回到 iconfont，将鼠标移动到图标上方，在弹出的菜单中，选择「编辑图标」。

       在打开的页面中，左下角的 4 位字符——e8ab，就是爱心图标的 unicode 编码，将其粘贴到 wxss 文件中对应的位置，并在字符前面加上一个反斜杠 \。

       获取点赞图标的 unicode 编码，也需要进行同样的操作。

       至此，就算完成了 wxss 样式的编辑。

       为了在小程序中看到图标最终的渲染效果，我们还需要编辑一下 wxml 文件，wxml 相当于普通网页的 html 文件。在 wxml 中使用 icon 标签，输入如下代码：

       这里的 class 属性的值，就是对应 wxss 文件中自定义的类名，通过类名来应用相应的样式。完成以上所有操作，最终的渲染效果如下：

       搞得那么费劲，就只为得到两个小图标。。。好像有点得不偿失

       扩展阅读：

       《 写一个微信小程序的最少必要知识》

       以上，希望有帮助。

       References

       [1] Iconfont: iconfont.cn/

       欢迎关注