图标组件

icon 组件是 Uniapp 中用于显示图标的基础组件，支持多种图标类型，并可在不同平台（如 App、H5、小程序等）上展示。通过简单的属性设置，开发者可以控制图标的大小、颜色以及展示的图标类型。icon 组件适用于各类 UI 设计场景，常用于提示信息、状态标识、操作按钮等。

1. 什么是 icon 组件？

icon 组件用于展示系统内置的图标，并且支持跨平台展示不同的图标样式。该组件的优势在于它的简单易用和广泛兼容性，适合在移动端和小程序开发中展示各种状态提示、操作按钮图标等。通过 type 属性，开发者可以选择合适的图标类型，结合 size 和 color 属性自定义图标样式。

使用场景

• 状态提示：如成功、错误、警告、加载中等状态图标。
• 搜索与操作图标：在输入框、搜索框旁边展示相关图标，或在按钮中加入功能性图标。
• 按钮与控制元素：结合按钮使用，作为交互操作的可视化提示，如下载、清除、取消操作等。

2. icon 组件的常用属性

icon 组件提供了少量但灵活的属性，开发者可以通过这些属性快速自定义图标的大小、颜色和类型。

属性名	类型	默认值	说明
type	String	无	图标的类型，决定图标的样式，如 success, info, warn 等
size	Number	23	设置图标的大小，单位为 px
color	String	无	设置图标的颜色，支持 CSS 中的 color 属性设置

2.1 图标类型 type

• 说明：通过 type 属性可以设置图标的种类，不同的图标类型用于表达不同的含义和交互操作。Uniapp 支持多平台图标类型，不同的平台支持的图标类型可能有所不同。
• 支持的图标类型：
  • success: 表示成功的图标。
  • info: 信息提示图标。
  • warn: 警告图标。
  • waiting: 等待加载图标。
  • cancel: 取消操作图标。
  • download: 下载图标。
  • search: 搜索图标。
  • clear: 清除操作图标。

注意：百度、支付宝等平台有其特有的图标类型，如百度小程序的 personal、setting 等。

2.2 图标大小 size

• 说明：通过 size 属性设置图标的大小，默认单位是 px。开发者可以根据需求自定义大小，以适应不同的 UI 场景。
• 示例：

<template>
  <icon type="success" size="30"></icon> <!-- 设置图标大小为30px -->
</template>

2.3 图标颜色 color

• 说明：通过 color 属性设置图标的颜色，支持与 CSS color 属性一致的颜色值，如十六进制、RGB 或内置颜色名。
• 示例：

<template>
  <icon type="warn" size="40" color="red"></icon> <!-- 设置图标颜色为红色 -->
</template>

3. 展示多种图标案例

以下示例通过 icon 组件展示不同的图标类型，并通过不同的颜色和大小实现多样化的展示效果。该代码使用 Vue3 语法，并根据不同的平台展示有效的图标类型。

<template>
  <view class="icon-list">
    <!-- 使用 v-for 循环展示不同图标类型 -->
    <view class="icon-item" v-for="(value, index) in iconType" :key="index">
      <!-- 展示 icon 组件 -->
      <icon :type="value" :size="30" color="blue" />
      <!-- 显示图标名称 -->
      <text>{{ value }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const iconType = ref([])

onMounted(() => {
  // 根据不同平台加载图标类型
  // #ifdef APP-PLUS || MP-WEIXIN
  iconType.value = ['success', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear']
  // #endif

  // #ifdef MP-ALIPAY
  iconType.value = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'loading']
  // #endif

  // #ifdef MP-BAIDU
  iconType.value = ['success', 'info', 'warn', 'waiting', 'clear', 'search', 'personal', 'setting']
  // #endif
})
</script>

<style scoped>
.icon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

text {
  margin-top: 5px;
  font-size: 14px;
  color: #333;
}
</style>

代码解析

1. 平台判断：

   • 使用 #ifdef 条件编译语法，根据不同的平台加载适配的图标类型，确保跨平台图标展示的一致性。
   • 在 Vue3 的 onMounted 生命周期中初始化 iconType 列表。

2. 循环展示图标：

   • 使用 v-for 遍历 iconType 列表，动态生成图标和相应的文本描述。
   • 通过 size 和 color 属性调整图标的大小和颜色。

3. 布局样式：

   • 使用 flex 布局使图标在页面上均匀分布，每个图标项通过 icon-item 样式进行垂直排列。