微信小程序系统学习之图标Icon
微信小程序中，图标（Icon）这一元素至关重要，它主要用于视觉表达和交互引导。基础应用中，创建图标的核心代码是相当直观的。首先，让我们来看看不同类型的图标取值： type属性提供了多种选择：info： 通常用于显示信息提示，或者在操作前提示用户需要提供的必要信息。
微信小程序中图标的学习要点如下：图标的作用：图标在微信小程序中主要用于视觉表达和交互引导，是提升用户体验和交互设计的关键元素。图标的类型及取值：type属性：提供了多种选择，如info、warn、以及颜色区分的普通警告。info_circle：适用于表单中的状态标识，提示用户有信息需要注意。
在微信小程序中使用自定义 icon 图标，有以下六种方法：使用 icon 图标：直接将自定义图标作为图片资源引入，通过 image 标签使用。使用 Sprite：将多个图标整合到一张图片中，通过 CSS 背景定位和大小裁剪来显示不同的图标。
需将SVG代码转换为Base64编码格式。常用转换地址为：codepen.io/jakob-e/pen/...。完成转换后，即可在小程序中使用。在小程序代码中引用SVG，与常规CSS引用SVG方法相似。具体代码实现如下：至此，通过SVG与Base64编码的结合，成功在微信小程序中实现美观、灵活的图标显示。
微信小程序应用图标如何制作
微信小程序应用图标的制作步骤如下：创建图标文件：文件大小与形状：首先，需要新建一个144x144像素的正方形文件。这是微信小程序对应用图标大小的严格要求。导入图片：选择图片：选择你想要用作图标的图片，比如公司的logo或其他具有代表性的图像。导入图片：将选中的图片导入到你刚才新建的正方形文件中。
制作微信小程序应用图标的步骤如下：新建正方形文件：尺寸要求：首先，需要新建一个144x144像素的正方形文件，以满足微信小程序的图标尺寸要求。导入图标素材：将想要作为图标的文件图片导入到这个新建的文件中。
然后导入自己的logo或者其他想要作为图标的文件图片，如图所示。图片导入进来后可能大小和这个文件不匹配，需要使用快捷键ctrl+T变形命令来调整大小和位置。然后调整对齐方式，如图所示，选择这两个图层，然后在上方设置对齐方式。
首先打开微信开发工具，载入需要修改的小程序工程。然后打开app.json页面，在window下写下面的代码，先用color和selectedColor设置底部菜单点击前和点击后文字的颜色。然后在list中设置两个标签，其中使用pagePath和text填写一下点击跳转的路径和选项的名字。
信“发现”界面中，点击小程序。2 选择小程序在小程序界面中，选择小程序。3 点击右上角三点在选择小程序界面中，点击右上角三点。4 点击复制链接在右上角三点界面中，点击复制链接即可。
进入后点击我的小程序。点击编辑小程序，可以对基本信息进行修改，比 名称、布局、图标等等。点击基本信息，然后修改图标，如图所示。小程序的图标尺寸和大小都是有要求的，144*144，规格按照要求要求制作完成后上传。设置完成后点击发布，进行刷新，在微信上搜索小程序就发生变化了。
微信小程序底部tab图标大小
1、制作的icon要在50*50px以内（红色）， 小程序导航icon 周围系统自留了空间（蓝色），此处的小房子icon是34*39px 微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
2、Tab Bar设计规范 标签数量适宜：微信建议标签数量在24个适宜，可根据产品需要选择或去掉底部标签栏功能。 表现形式多样：Tab Bar的表现形式同样可根据实际需求进行设计，但需保持清晰明确。
3、顶部的tabBar目前仅微信小程序上支持。如果需要使用顶部选项卡，建议不使用tabBar的顶部设置，而是自己做顶部选项卡。准备好项目所需的tab图标。我这里准备了6张，分别用于3个tab切换使用，放在了static文件夹下的tabbar文件夹下。找到pages.json文件进行配置。