更新记录

1.0.2（2025-12-06） 下载此版本

添加预览图

1.0.1（2025-12-06） 下载此版本

去掉没用的width属性

1.0.0（2025-12-06） 下载此版本

appx-icon 是基于 Uniapp X（UTS 语法）开发的图标 + 文本组合组件，支持自定义图标尺寸、圆角、文本样式及文本相对图标的位置，适配 APP / 小程序 / H5 多端，容器可精准包裹图标和文本内容，适用于按钮、列表项、导航栏等场景。

平台兼容性

uni-app x(4.87)

appx-icon 组件帮助文档

组件介绍

appx-icon 是基于 Uniapp X（UTS 语法）开发的图标+文本组合组件，支持自定义图标尺寸、圆角、文本样式及文本相对图标的位置，适配 APP/小程序/H5 多端，容器可精准包裹图标和文本内容，适用于按钮、列表项、导航栏等场景。

组件属性（Props）

枚举类型说明

LabelPos 枚举仅包含两个可选值，用于约束 labelPos 属性：

enum LabelPos {
  right = 'right', // 文本在图标右侧
  bottom = 'bottom' // 文本在图标下方
}

使用示例

基础用法（默认配置）

<template>
  <appx-icon src="/static/icon.png" />
</template>

<script lang="uts" setup>

</script>

效果：显示 20px 方形无圆角图标，右侧显示默认文本 “hello world”，文本 15px 灰色、不加粗，间距 3px。

自定义样式+文本位置

<template>
  <appx-icon 
    src="https://example.com/icon.png" 
    size="30"
    borderRadius="8"
    label="我的图标"
    bold="true"
    labelSize="14"
    labelColor="#ff6600"
    labelPos="bottom"
    space="5"
  />
</template>

<script lang="uts" setup>
import appxIcon from '@/components/appx-icon/appx-icon.uvue';
</script>

效果：30px 图标（圆角 8px），下方显示橙色加粗文本 “我的图标”（14px），文本与图标垂直间距 5px。

指定容器宽度

<template>
  <appx-icon 
    src="/static/avatar.png" 
    label="个人中心"
    labelPos="right"
  />
</template>

<script lang="uts" setup>
</script>

效果：组件容器固定宽度 120px，图标+文本居中显示，文本在图标右侧。

样式说明

1. 外层容器：默认 display: flex，justify-content: center + align-items: center，宽高自适应内容（fit-content），无多余空白；
2. 布局方向：labelPos="right" 时为横向布局（row），labelPos="bottom" 时为纵向布局（column）；
3. 文本间距：横向布局时文本左间距 = space，纵向布局时文本上间距 = space；
4. 样式隔离：组件使用 scoped 样式，不会污染全局样式。

注意事项

1. 图片路径：本地图片需放在 static 目录下，使用绝对路径（/static/xxx.png）；网络图片需配置对应平台域名白名单（如微信小程序后台配置合法域名）；
2. 单位兼容：所有尺寸属性默认单位为 px，暂不支持 rpx，如需适配多端可自行转换（如 size="40rpx" 需在传入时处理为 px）；
3. 多端适配：组件基于 Uniapp X 开发，仅支持 .uvue 页面/组件中使用，不兼容普通 Uniapp（.vue）项目。