xtf-icon

组件说明

xtf-icon 是图标组件，基于 Remix Icon 字体图标库。支持主题色、变体样式、预设尺寸、旋转动画和徽标，适用于导航图标、操作按钮图标和状态图标等场景。

基础用法

1. 基础用法

通过 name 指定图标名称：

vue

<template>
  <view style="display: flex; gap: 32rpx">
    <xtf-icon name="home" />
    <xtf-icon name="search" />
    <xtf-icon name="favorite" />
    <xtf-icon name="settings" />
  </view>
</template>

2. 主题与变体

通过 theme 设置主题色，通过 variant 设置变体样式：

vue

<template>
  <view style="display: flex; gap: 32rpx">
    <xtf-icon name="check_circle" theme="success" />
    <xtf-icon name="warning" theme="warning" />
    <xtf-icon name="error" theme="danger" />
    <xtf-icon name="info" theme="info" variant="soft" padding="16rpx" round />
  </view>
</template>

3. 尺寸与颜色

通过 size 设置尺寸，通过 color 自定义颜色：

vue

<template>
  <view style="display: flex; align-items: center; gap: 32rpx">
    <xtf-icon name="home" size="xs" />
    <xtf-icon name="home" size="sm" />
    <xtf-icon name="home" size="md" />
    <xtf-icon name="home" size="lg" />
    <xtf-icon name="home" size="xl" />
    <xtf-icon name="home" color="#ff6700" />
  </view>
</template>

4. 旋转与徽标

通过 spin 启用旋转动画，通过 badge 显示徽标：

vue

<template>
  <view style="display: flex; gap: 32rpx">
    <xtf-icon name="refresh" spin />
    <xtf-icon name="notifications" badge="5" />
    <xtf-icon name="shopping_cart" dot />
  </view>
</template>

全部属性

属性	类型	默认值	作用描述	适用范围
`name`	`String`	`''`	图标名称	图标
`size`	`String \| Number`	`'md'`	尺寸（xs/sm/md/lg/xl 或自定义）	尺寸
`color`	`String`	`''`	自定义颜色	颜色
`theme`	`String`	`'primary'`	主题色	主题
`variant`	`String`	`'plain'`	变体样式（plain/soft）	样式
`filled`	`Boolean`	`false`	是否填充风格	风格
`weight`	`String \| Number`	`300`	字重	样式
`grad`	`String \| Number`	`0`	字体可变轴 grad 值；当前实现仅接收属性，不改变渲染	API 对齐
`opsz`	`String \| Number`	`24`	字体可变轴 opsz 值；当前实现仅接收属性，不改变渲染	API 对齐
`bg`	`String`	`''`	背景色	背景
`padding`	`String \| Number`	`0`	内边距	布局
`radius`	`String \| Number`	`''`	圆角	样式
`round`	`Boolean`	`false`	是否圆形	形状
`clickable`	`Boolean`	`false`	是否可点击	交互
`spin`	`Boolean`	`false`	是否旋转	动画
`pulse`	`Boolean`	`false`	是否脉冲	动画
`dot`	`Boolean`	`false`	是否显示圆点	徽标
`badge`	`String \| Number`	`''`	徽标内容	徽标
`badgeMax`	`String \| Number`	`99`	徽标最大值	徽标
`customClass`	`String`	`''`	自定义类名	样式覆盖
`customStyle`	`String \| Object`	`''`	自定义样式	动态样式覆盖

事件

事件名称	触发时机	回调参数	参数说明
`click`	`clickable` 为 `true` 时点击触发	`(event)`	原始点击事件对象

主题说明

支持 primary、success、warning、danger、info、secondary、disabled、inverse 主题色
variant="soft" 时自动使用对应主题色的浅色背景
预设尺寸：xs(24rpx)、sm(32rpx)、md(40rpx)、lg(52rpx)、xl(68rpx)
图标名称支持 Material Icons 和 Remix Icon 两种命名风格

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。

xtf-icon ​

组件说明 ​

基础用法 ​

1. 基础用法 ​

2. 主题与变体 ​

3. 尺寸与颜色 ​

4. 旋转与徽标 ​

全部属性 ​

事件 ​

主题说明 ​