Icon 图标

基于 Remix Icon 的图标组件，提供了丰富的图标集合。支持APP-NVUE和其他平台。

基础用法

<zk-icon name="home-6-line" />
<zk-icon name="user-fill" />
<zk-icon name="settings-line" />

平台差异说明

组件在不同平台有以下区别：

图标颜色

<zk-icon name="heart-fill" color="#f56c6c" />
<zk-icon name="star-fill" color="#e6a23c" />
<zk-icon name="message-fill" color="#409eff" />

如果不指定color属性，将使用主题中的textPrimary颜色

图标尺寸

<zk-icon name="notification-line" size="24" />
<zk-icon name="notification-line" size="32" />
<zk-icon name="notification-line" size="40" />

自定义样式

<zk-icon 
    name="arrow-right-s-line"
    :customStyle="{ transform: 'rotate(90deg)' }"
/>

API

Props 属性

参数 说明 类型 可选值 默认值 平台差异
name 图标名称 string 参考图标列表 '' 无
color 图标颜色，不设置则使用主题色 string CSS颜色值 themeColors.textPrimary 无
size 图标大小，单位rpx string / number - 32 无
customStyle 自定义样式对象 object - {} 无

Events 事件

事件名称 说明 回调参数 平台差异
click 点击图标时触发 event: Event 无

主题集成

组件会自动使用全局主题中的textPrimary颜色作为默认颜色。可以通过color属性覆盖此行为。