本文介绍了 HarmonyOS6 中 RcIcon 组件的属性系统与样式定制策略。详细解析了 name、color、iconSize、iconRadius、fontName、iconAnimation 及 onIconClick 七大核心属性。涵盖资源类型识别、颜色值支持（十六进制/RGB/命名/资源）、尺寸处理（数字/字符串/响应式）、圆角设置、自定义字体注册、动画参数配置及点击事件处理。提供了状态驱动样式、主题适配及响应式设计等组合技巧，旨在帮助开发者高效复用符号组件，提升鸿蒙应用开发效率与体验。
RcIcon 组件提供了 7 个核心属性，覆盖了符号显示的所有关键维度：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
name | `keyof RcIconDataType | ResourceStr` | 必需 |
color | ResourceColor | undefined | 符号颜色 |
iconSize | RcStringNumber | baseStyle.fontSizeLg | 符号大小 |
iconRadius | `Length | BorderRadiuses` | 0 |
fontName | ResourceStr | "" | 自定义字体名称 |
iconAnimation | AnimateParam | undefined | 动画参数 |
onIconClick | (event: TouchEvent) => void | () => {} | 点击事件回调 |
// @Param @Require name:keyof RcIconDataType | ResourceStr
类型说明：
keyof RcIconDataType：492 个预定义符号名称ResourceStr：HarmonyOS 资源引用类型@Require：必需参数，不可省略方式 1：使用 IconName 常量（推荐）
import { RcIcon, IconName } from 'rchoui';
RcIcon({ name: IconName.HOME });
RcIcon({ name: IconName.HOME_OUTLINE });
方式 2：使用字符串字面量
RcIcon({ name: 'icon-houi_home' });
RcIcon({ name: 'icon-houi_home_outline' });
方式 3：使用本地资源
RcIcon({ name: $r('app.media.logo') });
RcIcon({ name: $rawfile('custom.png') });
方式 4：使用在线图片
RcIcon({ name: 'https://example.com/image.png' });
RcIcon({ name: 'http://cdn.com/icon.svg' });
方式 5：直接使用 Unicode
RcIcon({ name: '\ue7c7' }); // 自定义 Unicode 字符
组件内部通过以下逻辑识别资源类型：
// 识别流程
if (typeof this.name === "string") {
if (this.name.startsWith("http")) {
// 在线图片路径
return <Image>;
} else {
// 字体符号或 Unicode 字符
return <Text>;
}
} else {
// ResourceStr 类型（本地资源）
return <Image>;
}
// @Param color?: ResourceColor = undefined
类型说明：
ResourceColor：HarmonyOS 标准颜色类型undefined（继承父组件）十六进制颜色
RcIcon({ name: IconName.HEART, color: '#ff0000' });
RcIcon({ name: IconName.HEART, color: '#f00' });
RGB/RGBA 颜色
RcIcon({ name: IconName.STAR, color: 'rgb(255, 165, 0)' });
RcIcon({ name: IconName.STAR, color: 'rgba(255, 165, 0, 0.8)' });
命名颜色
RcIcon({ name: IconName.INFO, color: Color.Blue });
RcIcon({ name: IconName.SUCCESS, color: Color.Green });
资源颜色
RcIcon({ name: IconName.PRIMARY, color: $r('app.color.primary') });
RcIcon({ name: IconName.BRAND, color: $r('sys.color.brand') });
字体符号颜色：
Text(this.getIconContent()).fontColor(this.color); // 通过 fontColor 设置
图片符号颜色：
Image(this.name).fillColor(this.color); // 通过 fillColor 设置（仅 SVG 有效）
注意事项：
fillColor，会被忽略fillColor，可改变填充色状态表达
@State isActive: boolean = false;
RcIcon({ name: IconName.STAR, color: this.isActive ? '#ffaa00' : '#cccccc' });
语义化颜色
// 成功状态
RcIcon({ name: IconName.CHECKMARK_CIRCLE, color: '#52c41a' });
// 错误状态
RcIcon({ name: IconName.CLOSE_CIRCLE, color: '#ff4d4f' });
// 警告状态
RcIcon({ name: IconName.ALERT_TRIANGLE, color: '#faad14' });
// 信息状态
RcIcon({ name: IconName.INFO, color: '#1890ff' });
主题色适配
// 使用全局主题色
RcIcon({ name: IconName.HOME, color: $r('app.color.primary') });
// 深色模式适配
RcIcon({ name: IconName.MOON, color: this.isDarkMode ? '#ffffff' : '#000000' });
// @Param iconSize: RcStringNumber = this.baseStyle.fontSizeLg as string
// RcStringNumber 类型定义
type RcStringNumber = string | number;
默认值：
baseStyle.fontSizeLg数字格式（自动添加 vp 单位）
RcIcon({ name: IconName.HOME, iconSize: 20 }); // 20vp
RcIcon({ name: IconName.HOME, iconSize: 30 }); // 30vp
RcIcon({ name: IconName.HOME, iconSize: 40 }); // 40vp
字符串格式（明确指定单位）
RcIcon({ name: IconName.HOME, iconSize: '20vp' }); // 20vp
RcIcon({ name: IconName.HOME, iconSize: '30px' }); // 30px
RcIcon({ name: IconName.HOME, iconSize: '40lpx' }); // 40lpx
RcIcon({ name: IconName.HOME, iconSize: '50fp' }); // 50fp
// 工具函数：统一处理尺寸值
function getSizeByUnit(size: RcStringNumber, isFontSize?: boolean): Length {
if (typeof size === 'number') {
return isFontSize ? `${size}fp` : `${size}vp`;
}
return size;
}
// 应用场景
.fontSize(getSizeByUnit(this.iconSize, true)); // 字体尺寸用 fp
.width(getSizeByUnit(this.iconSize)); // 图片尺寸用 vp
.height(getSizeByUnit(this.iconSize));
| 尺寸级别 | 推荐值 | 适用场景 |
|---|---|---|
| 超小 | 12-14 | 表格内符号、标签 |
| 小号 | 16-18 | 列表项符号、按钮前缀 |
| 常规 | 20-24 | 导航栏、工具栏 |
| 中等 | 28-32 | 卡片装饰、功能入口 |
| 大号 | 40-48 | 页面主体符号 |
| 超大 | 64+ | 空状态、引导页 |
@State windowWidth: number = 0;
aboutToAppear() {
this.windowWidth = display.getDefaultDisplaySync().width;
}
build() {
RcIcon({ name: IconName.HOME, iconSize: this.windowWidth < 600 ? 20 : 24 });
}
// @Param iconRadius: Length | BorderRadiuses | LocalizedBorderRadiuses = 0
类型说明：
Length：单一圆角值BorderRadiuses：四角独立设置LocalizedBorderRadiuses：支持本地化的圆角// 数字格式
RcIcon({ name: IconName.HOME, iconRadius: 4 });
RcIcon({ name: IconName.HOME, iconRadius: 8 });
// 字符串格式
RcIcon({ name: IconName.HOME, iconRadius: '8vp' });
RcIcon({ name: IconName.HOME, iconRadius: '50%' }); // 圆形
RcIcon({
name: $r('app.media.avatar'),
iconSize: 40,
iconRadius: { topLeft: 4, topRight: 8, bottomLeft: 8, bottomRight: 4 }
});
// 方法 1：使用 50% 圆角
RcIcon({ name: $r('app.media.avatar'), iconSize: 40, iconRadius: '50%' });
// 方法 2：使用数值（等于尺寸的一半）
RcIcon({ name: $r('app.media.avatar'), iconSize: 40, iconRadius: 20 });
头像符号
RcIcon({ name: $r('app.media.avatar'), iconSize: 50, iconRadius: '50%' }); // 圆形头像
品牌 Logo
RcIcon({ name: $r('app.media.brand'), iconSize: 60, iconRadius: 12 }); // 圆角矩形
图片符号
RcIcon({ name: 'https://example.com/thumb.jpg', iconSize: 80, iconRadius: 8 }); // 略带圆角
// @Param fontName: ResourceStr = ""
用途：
rcFont 字体使用第三方字体
// 1. 先注册自定义字体
aboutToAppear() {
let font: Font = this.getUIContext().getFont();
font.registerFont({
familyName: 'MaterialIcons',
familySrc: $rawfile('MaterialIcons.ttf')
});
}
// 2. 使用自定义字体
RcIcon({
name: '\ue88a', // Material Icons 的 home 符号
fontName: 'MaterialIcons'
});
项目特定字体
RcIcon({ name: 'custom-symbol', fontName: $rawfile('ProjectFont.woff') });
registerFont()rawfile 目录// @Param iconAnimation?: AnimateParam = undefined
// AnimateParam 类型（HarmonyOS 标准动画参数）
interface AnimateParam {
duration?: number; // 动画时长（毫秒）
curve?: Curve | ICurve; // 动画曲线
delay?: number; // 延迟时间
iterations?: number; // 迭代次数（-1 为无限循环）
playMode?: PlayMode; // 播放模式
}
@State rotationAngle: number = 0;
RcIcon({
name: IconName.SYNC,
iconSize: 30,
iconAnimation: {
duration: 1000,
curve: Curve.Linear,
iterations: -1 // 无限循环
}
}).rotate({ angle: this.rotationAngle }).onAppear(() => {
this.rotationAngle = 360;
});
@State scale: number = 1;
RcIcon({
name: IconName.HEART,
iconSize: 30,
iconAnimation: {
duration: 300,
curve: Curve.EaseInOut
}
}).scale({ x: this.scale, y: this.scale }).onTouch((event) => {
if (event.type === TouchType.Down) {
this.scale = 1.2;
} else if (event.type === TouchType.Up) {
this.scale = 1;
}
});
@State opacity: number = 1;
RcIcon({
name: IconName.BELL,
iconSize: 30,
iconAnimation: {
duration: 1000,
curve: Curve.EaseInOut,
iterations: -1,
playMode: PlayMode.Alternate // 往返播放
}
}).opacity(this.opacity).onAppear(() => {
this.opacity = 0.3;
});
import { curves } from '@kit.ArkUI';
RcIcon({
name: IconName.STAR,
iconSize: 30,
iconAnimation: {
duration: 500,
curve: curves.springMotion(0.6, 1.0) // 弹性动画
}
});
性能考虑：
requestAnimationFrame用户体验：
// @Event onIconClick:(event: TouchEvent)=>void=()=>{}
TouchEvent 对象包含：
type：触摸类型（Down/Move/Up/Cancel）x, y：触摸坐标timestamp：事件时间戳target：触摸目标元素RcIcon({
name: IconName.HEART,
onIconClick: () => {
console.log('符号被点击');
}
});
@State isFavorite: boolean = false;
RcIcon({
name: this.isFavorite ? IconName.HEART : IconName.HEART_OUTLINE,
color: this.isFavorite ? '#ff0000' : '#999999',
onIconClick: () => {
this.isFavorite = !this.isFavorite;
}
});
handleIconClick(id: string) {
console.log(`符号 ${id} 被点击`);
}
RcIcon({
name: IconName.TRASH,
onIconClick: () => {
this.handleIconClick('item-123');
}
});
RcIcon({
name: IconName.CLOSE,
onIconClick: (event: TouchEvent) => {
event.stopPropagation(); // 阻止冒泡
this.closeDialog();
}
});
@State isPressed: boolean = false;
private handleTouch = (event: TouchEvent): void => {
if (event.type === TouchType.Down) {
this.isPressed = true;
} else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
this.isPressed = false;
if (event.type === TouchType.Up) {
// 触发点击回调
}
}
};
RcIcon({
name: IconName.BUTTON,
color: this.isPressed ? '#0066cc' : '#0080ff'
});
RcIcon({ name: IconName.HOME, color: '#1890ff', iconSize: 24, iconRadius: 4 });
@State status: 'normal' | 'active' | 'disabled' = 'normal';
RcIcon({
name: IconName.STAR,
color: this.getStatusColor(),
iconSize: this.getStatusSize(),
onIconClick: this.status !== 'disabled' ? () => { this.toggleStatus() } : undefined
});
getStatusColor(): ResourceColor {
switch (this.status) {
case 'active': return '#ffaa00';
case 'disabled': return '#cccccc';
default: return '#666666';
}
}
@StorageLink('isDarkMode') isDarkMode: boolean = false;
RcIcon({
name: IconName.MOON,
color: this.isDarkMode ? '#ffffff' : '#000000',
iconSize: 24
});
@State breakpoint: string = 'sm';
RcIcon({
name: IconName.LOGO,
iconSize: this.getResponsiveSize(),
iconRadius: this.getResponsiveRadius()
});
getResponsiveSize(): number {
const sizeMap = { xs: 16, sm: 20, md: 24, lg: 28 };
return sizeMap[this.breakpoint] || 20;
}
name 为必需
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online