Icon 图标

17:06

说明

图标组件，基于 iconfont 字体图标集，覆盖了绝大多数常见业务场景的图标（首页、购物车、支付、社交、方向箭头等），支持自定义大小、颜色、粗体与垂直微调。

组件支持两种形态，由 name 自动判断：

• 字体图标：name 为图标集内的图标名（如 home、star），以 <text> 渲染；
• 图片图标：name 为图片地址时，以 <image> 渲染（可配合 width/height/imgMode/top）。

兼容性

平台	支持情况
App	✅ 支持
H5	✅ 支持
微信小程序	✅ 支持

示例

尺寸与颜色

通过 size（单位 rpx）自定义尺寸、color（可接受主题色或任意色值）自定义颜色，逐一放大展示；用 custom-class 定制外间距。

查看源码

<template>
    <view class="icon-row">
        <ux-icon name="home" size="30" color="#2979ff" custom-class="icon-spacing"></ux-icon>
        <ux-icon name="star-fill" size="40" color="#fa3534" custom-class="icon-spacing"></ux-icon>
        <ux-icon name="setting-fill" size="50" color="#19be6b" custom-class="icon-spacing"></ux-icon>
        <ux-icon name="bell-fill" size="60" color="#ff9900" custom-class="icon-spacing"></ux-icon>
    </view>
</template>

<style scoped>
.icon-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.icon-spacing {
    margin-right: 32rpx;
    margin-bottom: 24rpx;
}
</style>

加粗

bold 属性控制图标是否加粗，与普通图标对照展示。

查看源码

<template>
    <view class="icon-row">
        <ux-icon name="home" bold size="40" color="#2979ff" custom-class="icon-spacing"></ux-icon>
        <ux-icon name="star-fill" size="40" color="#2979ff" custom-class="icon-spacing"></ux-icon>
    </view>
</template>

<style scoped>
.icon-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.icon-spacing {
    margin-right: 32rpx;
    margin-bottom: 24rpx;
}
</style>

图片图标

name 传入图片地址时渲染为图片图标，可配合 width、height 与 imgMode 控制尺寸与显示模式。

查看源码

<template>
    <view class="icon-row">
        <ux-icon name="/static/logo.png" width="60" height="60" custom-class="icon-spacing"></ux-icon>
        <ux-icon name="/static/logo.png" img-mode="aspectFit" width="60" height="60" custom-class="icon-spacing"></ux-icon>
    </view>
</template>

<style scoped>
.icon-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.icon-spacing {
    margin-right: 32rpx;
    margin-bottom: 24rpx;
}
</style>

图标列表

图标集内所有图标以网格形式罗列，点击任意图标即可复制其名称，方便在项目中使用。演示页通过 v-for 渲染 iconList 并在点击时写入剪贴板。

查看源码

<template>
    <view class="icon-grid">
        <view class="icon-item" v-for="(item, index) in iconList" :key="index">
            <ux-icon :name="item.name" size="40" color="#909399"></ux-icon>
            <text class="icon-name">{{ item.name }}</text>
        </view>
    </view>
</template>

<script setup lang="uts">
const iconList = [
    { name: 'home' },
    { name: 'star' },
    { name: 'search' },
    { name: 'setting' },
    { name: 'phone' },
    { name: 'heart' }
];
</script>

<style scoped>
.icon-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33.33%;
    padding: 24rpx 0;
}
.icon-name {
    font-size: 22rpx;
    color: #909399;
    margin-top: 12rpx;
}
</style>

完整图标名列表见演示页「图标列表」区块（包含图标名到 ux-icon 复制）的完整 iconList，或直接打开演示页查看。

API

Props

属性	说明	类型	默认值	版本
name	图标名称（见演示页图标集），传图片地址时渲染为图片图标	string	''	-
color	图标颜色，可接受主题色名（如 primary）或任意色值	string	''	-
size	字体大小，单位 rpx；默认 inherit 继承父级字号（未设置时不写 font-size）	string | number	inherit	-
bold	是否显示粗体	boolean	false	-
top	图标的垂直偏移（rpx，正数向下），用于个别图标视觉垂直居中微调	string | number	0	-
index	点击时随事件回传的索引，用于区分点击了哪一个	string | number	''	-
hoverClass	触摸图标时的类名（按压缩放效果需自行定义该类）	string	''	-
customPrefix	自定义字体图标前缀，便于扩展自己的图标库	string	uicon	-
imgMode	图片图标模式，参考 uni-app image 组件	ImgMode	widthFix	-
width	图片图标宽度（rpx）	string | number	''	-
height	图片图标高度（rpx）	string | number	''	-
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类（跨端定制根节点样式，组件已注册 external-class）	string	''	-

Events

事件名	说明	回调参数	版本
click	点击图标时触发，index 非空则回传其值	index: string | number | UniEvent	-
touchstart	触摸图标时触发	index: string | number | UniTouchEvent	-

Slots

ux-icon 无插槽，根元素直接为 <text>（字体图标）或 <image>（图片图标）。

ux-icon 不存在插槽，根节点即图标本身。

注意事项

1. name 传图标集内的名称时渲染为字体图标；传图片地址时渲染为图片图标（此时 size 不生效，改用 width/height）。
2. color 可传主题色名（primary、success、error、warning、info）或任意色值；传主题色名时组件通过主题色类着色，传色值时通过内联 color 着色。
3. size 默认值为 inherit，值为 inherit 时组件省略 font-size、让图标继承父级字号（App 端不支持 font-size: inherit 的原生写法）。
4. 定制根节点样式（外间距等）时使用 custom-class 而非页面原生 class，ux-icon 已注册 externalClasses: ['custom-class']，该机制在小程序隔离策略 2.0 下也能把页面类穿透进组件生效。
5. 当某个图标在图标集内缺失时不会显示内容，请核对演示页「图标列表」中的图标名。