uniapp图标预览

图标预览方法

在UniApp中预览图标通常涉及使用内置组件或自定义方式展示图标，以下是几种常见方法：

使用uni-icons组件
UniApp官方提供的uni-icons组件可直接显示内置图标库中的图标，支持调整颜色和大小：

<uni-icons type="contact" size="30" color="#007AFF"></uni-icons>

通过修改type属性切换不同图标（如home、settings等），具体图标名称需参考官方文档。

自定义图标字体或图片
若需使用第三方图标库（如Font Awesome），可通过以下步骤实现：

1. 引入字体文件至static目录
2. 在App.vue中全局定义样式：

   @font-face {
   font-family: 'CustomIcons';
   src: url('/static/fonts/custom-icons.ttf') format('truetype');
   }
   .custom-icon {
   font-family: 'CustomIcons';
   }

3. 页面中使用：

   <text class="custom-icon"></text> <!-- 具体字符编码需参考图标库文档 -->

图片图标方案
将图标保存为png/svg格式并放入static目录，通过image组件引用：

<image src="/static/icons/home.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>

开发工具实时预览

• HBuilderX：运行到内置浏览器或模拟器时，图标会实时渲染，支持热重载。
• 微信开发者工具：需配置manifest.json中的mp-weixin项，确保静态资源路径正确。

注意事项

• 图标尺寸建议使用偶数（如24px、32px）避免模糊
• 真机调试时需检查静态资源是否正常打包
• 安卓平台部分字体图标可能需要额外兼容处理