Icon 图标
rchoui 提供了一套丰富的图标集合，基于 HarmonyOS 设计规范，满足多场景使用需求。
简介
RcIcon 是 rchoui 组件库的图标系统模块，包含了 490 个常用图标，涵盖基础操作、导航、社交、多媒体等多个类别。
版本要求
| HarmonyOS 5 | HarmonyOS 6+ |
|---|---|
| √ | √ |
版本说明
该组件仅适用于 HarmonyOS 5、HarmonyOS 6 及以上版本。
图标集合
点击图标卡片可快速复制图标名称，方便在代码中使用。
共 490 个图标
icon-houi_flash
icon-houi_mic_outline
icon-houi_download
icon-houi_tv
icon-houi_file_add
icon-houi_undo_outline
icon-houi_crop
icon-houi_toggle_right_outline
icon-houi_folder_remove_outline
icon-houi_volume_off
icon-houi_chevron_right_outline
icon-houi_tv_outline
icon-houi_corner_right_down
icon-houi_unlock
icon-houi_diagonal_arrow_left_up
icon-houi_volume_off_outline
icon-houi_flip_outline
icon-houi_skip_forward
icon-houi_checkmark_square_2
icon-houi_trending_down_outline
icon-houi_github
icon-houi_volume_up
icon-houi_corner_up_right_outline
icon-houi_slash_outline
icon-houi_eye_off_outline
icon-houi_trending_down
icon-houi_funnel
icon-houi_thermometer
icon-houi_eye_off_2_outline
icon-houi_options_2
icon-houi_email_outline
icon-houi_minus_outline
icon-houi_grid
icon-houi_volume_mute_outline
icon-houi_flag_outline
icon-houi_slash
icon-houi_compass_outline
icon-houi_volume_mute
icon-houi_chevron_down_outline
icon-houi_minus
icon-houi_github_outline
icon-houi_paper_plane_outline
icon-houi_done_all_outline
icon-houi_swap
icon-houi_headphones
icon-houi_stop_circle_outline
icon-houi_heart_outline
icon-houi_mic_off_outline
icon-houi_info_outline
icon-houi_sun
icon-houi_close_circle_outline
icon-houi_text
icon-houi_diagonal_arrow_left_down_outline
icon-houi_wifi_outline
icon-houi_droplet_outline
icon-houi_thermometer_minus
icon-houi_hash_outline
icon-houi_more_horizontal
icon-houi_file_add_outline
icon-houi_person_outline
icon-houi_file_outline
icon-houi_navigation_2_outline
icon-houi_layout_outline
icon-houi_globe_2
icon-houi_folder_remove
icon-houi_unlock_outline
icon-houi_layers
icon-houi_phone_call_outline
icon-houi_log_in_outline
icon-houi_people_outline
icon-houi_corner_right_up_outline
icon-houi_person_add
icon-houi_file
icon-houi_plus_circle_outline
icon-houi_link_2_outline
icon-houi_plus
icon-houi_edit
icon-houi_printer_outline
icon-houi_clipboard_outline
icon-houi_home
icon-houi_flash_off_outline
icon-houi_phone_missed
icon-houi_list
icon-houi_recording_outline
icon-houi_headphones_outline
icon-houi_moon
icon-houi_cloud_upload_outline
icon-houi_options
icon-houi_gift
icon-houi_share_outline
icon-houi_grid_outline
icon-houi_save
icon-houi_google_outline
icon-houi_question_mark
icon-houi_close_square
icon-houi_map_outline
icon-houi_menu
icon-houi_shopping_bag
icon-houi_menu_2_outline
icon-houi_shuffle_2
icon-houi_message_circle
icon-houi_settings_2_outline
icon-houi_color_palette_outline
icon-houi_moon_outline
icon-houi_mic
icon-houi_smiling_face_outline
icon-houi_external_link_outline
icon-houi_twitter_outline
icon-houi_linkedin_outline
icon-houi_shield
icon-houi_flip_2_outline
icon-houi_skip_back
icon-houi_menu_arrow_outline
icon-houi_pie_chart
icon-houi_eye
icon-houi_trash_2
icon-houi_hard_drive
icon-houi_star_outline
icon-houi_hash
icon-houi_toggle_left
icon-houi_code_outline
icon-houi_undo
icon-houi_minimize
icon-houi_volume_down_outline
icon-houi_minus_square_outline
icon-houi_upload_outline
icon-houi_image_outline
icon-houi_video_off
icon-houi_monitor
icon-houi_stop_circle
icon-houi_loader_outline
icon-houi_power_outline
icon-houi_globe_2_outline
icon-houi_sync_outline
icon-houi_flash_outline
icon-houi_share
icon-houi_folder_add
icon-houi_question_mark_circle_outline
icon-houi_globe
icon-houi_thermometer_plus_outline
icon-houi_folder_add_outline
icon-houi_shopping_bag_outline
icon-houi_monitor_outline
icon-houi_trash
icon-houi_folder
icon-houi_wifi_off
icon-houi_navigation_2
icon-houi_settings_2
icon-houi_move
icon-houi_copy
icon-houi_more_vertical_outline
icon-houi_minimize_outline
icon-houi_lock
icon-houi_corner_left_down_outline
icon-houi_minus_square
icon-houi_npm
icon-houi_menu_arrow
icon-houi_funnel_outline
icon-houi_globe_3
icon-houi_log_out
icon-houi_flag
icon-houi_navigation_outline
icon-houi_linkedin
icon-houi_paper_plane
icon-houi_options_outline
icon-houi_more_horizontal_outline
icon-houi_music_outline
icon-houi_corner_up_right
icon-houi_corner_right_down_outline
icon-houi_diagonal_arrow_left_down
icon-houi_archive
icon-houi_cube_outline
icon-houi_arrow_circle_left_outline
icon-houi_map
icon-houi_arrow_down_outline
icon-houi_compass
icon-houi_arrow_ios_back
icon-houi_minus_circle
icon-houi_archive_outline
icon-houi_done_all
icon-houi_arrow_circle_up
icon-houi_link_outline
icon-houi_arrow_forward
icon-houi_pause_circle_outline
icon-houi_arrowhead_down_outline
icon-houi_log_in
icon-houi_arrow_circle_right
icon-houi_message_circle_outline
icon-houi_arrow_circle_down_outline
icon-houi_image_2
icon-houi_arrow_downward_outline
icon-houi_message_square
icon-houi_arrow_ios_forward_outline
icon-houi_person_delete
icon-houi_arrow_ios_downward
icon-houi_facebook_outline
icon-houi_arrowhead_left
icon-houi_person_delete_outline
icon-houi_activity_outline
icon-houi_maximize
icon-houi_arrow_circle_down
icon-houi_npm_outline
icon-houi_arrow_ios_upward
icon-houi_pantone_outline
icon-houi_arrow_back
icon-houi_mic_off
icon-houi_arrow_down
icon-houi_person_remove_outline
icon-houi_arrow_ios_forward
icon-houi_minus_circle_outline
icon-houi_arrow_right
icon-houi_phone_call
icon-houi_alert_circle
icon-houi_phone_off
icon-houi_arrow_circle_up_outline
icon-houi_play_circle_outline
icon-houi_arrow_up_outline
icon-houi_people
icon-houi_battery
icon-houi_email
icon-houi_arrow_upward
icon-houi_keypad_outline
icon-houi_alert_triangle
icon-houi_message_square_outline
icon-houi_arrowhead_right_outline
icon-houi_heart
icon-houi_arrowhead_up
icon-houi_edit_2
icon-houi_award
icon-houi_plus_circle
icon-houi_arrow_left_outline
icon-houi_pin_outline
icon-houi_arrow_downward
icon-houi_diagonal_arrow_right_down
icon-houi_arrow_circle_left
icon-houi_play_circle
icon-houi_arrow_forward_outline
icon-houi_person_remove
icon-houi_attach_2
icon-houi_plus_square
icon-houi_activity
icon-houi_options_2_outline
icon-houi_arrow_circle_right_outline
icon-houi_pause_circle
icon-houi_arrow_back_outline
icon-houi_google
icon-houi_alert_triangle_outline
icon-houi_plus_outline
icon-houi_attach_outline
icon-houi_question_mark_circle
icon-houi_arrow_ios_downward_outline
icon-houi_external_link
icon-houi_alert_circle_outline
icon-houi_phone_off_outline
icon-houi_arrowhead_down
icon-houi_film_outline
icon-houi_at_outline
icon-houi_link_2
icon-houi_briefcase
icon-houi_pricetags
icon-houi_bar_chart_outline
icon-houi_radio_button_on_outline
icon-houi_backspace_outline
icon-houi_droplet_off_outline
icon-houi_bell_off
icon-houi_flip_2
icon-houi_behance
icon-houi_repeat_outline
icon-houi_bluetooth
icon-houi_question_mark_outline
icon-houi_arrow_upward_outline
icon-houi_radio
icon-houi_brush
icon-houi_radio_button_on
icon-houi_arrow_left
icon-houi_inbox
icon-houi_calendar
icon-houi_rewind_left
icon-houi_bar_chart_2
icon-houi_home_outline
icon-houi_arrow_right_outline
icon-houi_eye_off
icon-houi_at
icon-houi_repeat
icon-houi_browser_outline
icon-houi_person_done
icon-houi_arrow_ios_upward_outline
icon-houi_music
icon-houi_arrow_ios_back_outline
icon-houi_refresh_outline
icon-houi_arrow_up
icon-houi_flash_off
icon-houi_bell_outline
icon-houi_scissors_outline
icon-houi_arrowhead_right
icon-houi_more_vertical
icon-houi_car
icon-houi_percent
icon-houi_checkmark_square_outline
icon-houi_rewind_right_outline
icon-houi_behance_outline
icon-houi_search_outline
icon-houi_book_open_outline
icon-houi_person
icon-houi_bookmark_outline
icon-houi_shake
icon-houi_backspace
icon-houi_pantone
icon-houi_attach
icon-houi_shield_off_outline
icon-houi_charging
icon-houi_settings_outline
icon-houi_book
icon-houi_plus_square_outline
icon-houi_chevron_down
icon-houi_gift_outline
icon-houi_bulb_outline
icon-houi_file_remove_outline
icon-houi_arrowhead_up_outline
icon-houi_facebook
icon-houi_bar_chart
icon-houi_shield_off
icon-houi_camera_outline
icon-houi_wifi
icon-houi_arrowhead_left_outline
icon-houi_shopping_cart_outline
icon-houi_checkmark_square
icon-houi_shuffle_outline
icon-houi_clipboard
icon-houi_shopping_cart
icon-houi_chevron_right
icon-houi_shuffle
icon-houi_cast_outline
icon-houi_person_add_outline
icon-houi_checkmark_circle
icon-houi_diagonal_arrow_right_up_outline
icon-houi_checkmark_circle_2_outline
icon-houi_log_out_outline
icon-houi_close
icon-houi_radio_button_off_outline
icon-houi_bulb
icon-houi_skip_forward_outline
icon-houi_checkmark_outline
icon-houi_image
icon-houi_book_open
icon-houi_smartphone_outline
icon-houi_code
icon-houi_folder_outline
icon-houi_attach_2_outline
icon-houi_percent_outline
icon-houi_close_circle
icon-houi_phone_outline
icon-houi_cloud_upload
icon-houi_link
icon-houi_chevron_up_outline
icon-houi_keypad
icon-houi_clock_outline
icon-houi_phone
icon-houi_collapse_outline
icon-houi_droplet
icon-houi_color_palette
icon-houi_refresh
icon-houi_cast
icon-houi_pie_chart_outline
icon-houi_close_outline
icon-houi_pin
icon-houi_chevron_left_outline
icon-houi_smiling_face
icon-houi_bell
icon-houi_radio_button_off
icon-houi_code_download_outline
icon-houi_printer
icon-houi_award_outline
icon-houi_square_outline
icon-houi_checkmark_circle_2
icon-houi_toggle_left_outline
icon-houi_corner_down_left_outline
icon-houi_speaker_outline
icon-houi_corner_left_up
icon-houi_layout
icon-houi_corner_up_left_outline
icon-houi_toggle_right
icon-houi_bluetooth_outline
icon-houi_rewind_right
icon-houi_bookmark
icon-houi_phone_missed_outline
icon-houi_cloud_download_outline
icon-houi_trending_up_outline
icon-houi_camera
icon-houi_maximize_outline
icon-houi_color_picker
icon-houi_trash_outline
icon-houi_copy_outline
icon-houi_shake_outline
icon-houi_chevron_up
icon-houi_trending_up
icon-houi_browser
icon-houi_twitter
icon-houi_battery_outline
icon-houi_inbox_outline
icon-houi_corner_down_left
icon-houi_globe_outline
icon-houi_bar_chart_2_outline
icon-houi_radio_outline
icon-houi_credit_card_outline
icon-houi_umbrella
icon-houi_corner_left_down
icon-houi_person_done_outline
icon-houi_checkmark_square_2_outline
icon-houi_save_outline
icon-houi_book_outline
icon-houi_scissors
icon-houi_checkmark
icon-houi_rewind_left_outline
icon-houi_corner_left_up_outline
icon-houi_search
icon-houi_corner_right_up
icon-houi_menu_2
icon-houi_corner_down_right_outline
icon-houi_upload
icon-houi_chevron_left
icon-houi_video_off_outline
icon-houi_cloud_download
icon-houi_hard_drive_outline
icon-houi_diagonal_arrow_left_up_outline
icon-houi_menu_outline
icon-houi_diagonal_arrow_right_down_outline
icon-houi_shuffle_2_outline
icon-houi_bell_off_outline
icon-houi_video
icon-houi_collapse
icon-houi_skip_back_outline
icon-houi_download_outline
icon-houi_volume_down
icon-houi_droplet_off
icon-houi_star
icon-houi_credit_card
icon-houi_shield_outline
icon-houi_briefcase_outline
icon-houi_volume_up_outline
icon-houi_cube
icon-houi_video_outline
icon-houi_crop_outline
icon-houi_wifi_off_outline
icon-houi_clock
icon-houi_speaker
icon-houi_color_picker_outline
icon-houi_list_outline
icon-houi_edit_2_outline
icon-houi_sun_outline
icon-houi_diagonal_arrow_right_up
icon-houi_file_text_outline
icon-houi_calendar_outline
icon-houi_swap_outline
icon-houi_brush_outline
icon-houi_recording
icon-houi_close_square_outline
icon-houi_umbrella_outline
icon-houi_eye_outline
icon-houi_power
icon-houi_charging_outline
icon-houi_text_outline
icon-houi_edit_outline
icon-houi_pricetags_outline
icon-houi_file_remove
icon-houi_sync
icon-houi_info
icon-houi_smartphone
icon-houi_eye_off_2
icon-houi_thermometer_minus_outline
icon-houi_expand
icon-houi_layers_outline
icon-houi_car_outline
icon-houi_pie_chart_2
icon-houi_code_download
icon-houi_square
icon-houi_expand_outline
icon-houi_move_outline
icon-houi_checkmark_circle_outline
icon-houi_trash_2_outline
icon-houi_corner_up_left
icon-houi_lock_outline
icon-houi_flip
icon-houi_thermometer_outline
icon-houi_corner_down_right
icon-houi_settings
icon-houi_file_text
icon-houi_navigation
icon-houi_film
icon-houi_thermometer_plus
使用方式
RcIcon 图标组件
图标组件，支持字体图标和图片图标两种形式。
基本介绍
RcIcon 是一个灵活的图标组件，支持：
- 内置字体图标（outline 和 filled 两种风格）
- 在线图片 URL
- 本地资源图片
- Unicode 编码
代码演示
基础用法
typescript
import { RcIcon, IconName } from '@rchoui'
@Entry
@Component
struct IconExample {
build() {
Column({ space: 20 }) {
// 推荐：使用 IconName 常量（自动提示）
RcIcon({ name: IconName.HOME })
// 使用 outline 风格图标
RcIcon({ name: IconName.HEART_OUTLINE })
// 使用 filled 风格图标
RcIcon({ name: IconName.HEART })
// 传统方式：使用字符串（不推荐，容易拼写错误）
RcIcon({ name: 'icon-houi_home' })
}
}
}设置图标大小
typescript
import { RcIcon, IconName } from '@rchoui'
Column({ space: 20 }) {
RcIcon({ name: IconName.STAR, iconSize: 20 })
RcIcon({ name: IconName.STAR, iconSize: 30 })
RcIcon({ name: IconName.STAR, iconSize: 40 })
RcIcon({ name: IconName.STAR, iconSize: '50vp' })
}设置图标颜色
typescript
import { RcIcon, IconName } from '@rchoui'
Column({ space: 20 }) {
RcIcon({ name: IconName.HEART, color: '#ff0000' })
RcIcon({ name: IconName.HEART, color: Color.Blue })
RcIcon({ name: IconName.HEART, color: $r('app.color.primary') })
}使用图片图标
typescript
import { RcIcon } from '@rchoui'
Column({ space: 20 }) {
// 在线图片
RcIcon({
name: 'https://example.com/icon.png',
iconSize: 40
})
// 本地资源
RcIcon({
name: $r('app.media.icon'),
iconSize: 40
})
}设置圆角
typescript
Column({ space: 20 }) {
// 统一圆角
RcIcon({
name: 'icon-houi_star',
iconSize: 40,
iconRadius: 8
})
// 单独设置各个角
RcIcon({
name: $r('app.media.icon'),
iconSize: 40,
iconRadius: { topLeft: 4, topRight: 8, bottomLeft: 8, bottomRight: 4 }
})
}添加动画
typescript
@State rotation: number = 0
Column({ space: 20 }) {
RcIcon({
name: 'icon-houi_sync',
iconSize: 40,
iconAnimation: {
duration: 1000,
curve: Curve.Linear,
iterations: -1
}
})
.rotate({ angle: this.rotation })
}点击事件
typescript
Column({ space: 20 }) {
RcIcon({
name: 'icon-houi_heart_outline',
iconSize: 40,
color: this.isFavorite ? '#ff0000' : '#999999',
onIconClick: (event: TouchEvent) => {
this.isFavorite = !this.isFavorite
console.log('图标被点击了')
}
})
}API
Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| name | 图标名称、Unicode 编码或图片链接 | keyof RcIconDataType | ResourceStr | - | - |
| color | 图标颜色 | ResourceColor | undefined | - |
| iconSize | 图标大小 | RcStringNumber | baseStyle.fontSizeLg | - |
| iconRadius | 图标圆角 | Length | BorderRadiuses | LocalizedBorderRadiuses | 0 | - |
| fontName | 自定义字体名称 | ResourceStr | "" | 1.0.3 |
| iconAnimation | 动画参数 | AnimateParam | undefined | 1.0.4 |
| onIconClick | 点击事件回调 | (event: TouchEvent) => void | () => {} | - |
RcStringNumber 类型
typescript
type RcStringNumber = string | number支持以下格式：
- 数字：
20、30、40 - 字符串：
'20vp'、'30px'、'40lpx'
内置图标
组件内置了两种风格的图标：
Outline 风格（线型）
以 _outline 结尾，如：
icon-houi_home_outlineicon-houi_heart_outlineicon-houi_star_outline
Filled 风格（实底）
不带 _outline 后缀，如：
icon-houi_homeicon-houi_hearticon-houi_star
完整图标列表请参考
config.ets中的RcIconList
使用建议
1. 图标大小规范
typescript
// 推荐使用标准尺寸
小图标：16-20
常规图标：24-28
大图标：32-48
超大图标：64+2. 颜色使用
typescript
// 推荐使用主题色
RcIcon({ name: 'icon-houi_heart', color: $r('app.color.primary') })
// 根据状态动态设置颜色
RcIcon({
name: 'icon-houi_star',
color: this.isActive ? '#ffaa00' : '#cccccc'
})3. 性能优化
typescript
// 避免在循环中使用过大的图标
ForEach(list, (item: Item) => {
RcIcon({
name: item.icon,
iconSize: 24 // 使用合适的尺寸
})
})4. 图片图标建议
typescript
// 对于图片图标，建议设置明确的尺寸
RcIcon({
name: 'https://example.com/icon.png',
iconSize: 40, // 明确指定宽高
iconRadius: 4 // 可选的圆角
})IconName 图标名称常量
为了提供更好的开发体验，我们提供了 IconName 常量对象，包含所有内置图标的名称。
优势
- 智能提示：IDE 自动补全，避免拼写错误
- 类型安全：TypeScript 类型检查
- 易于维护：统一管理图标名称
使用方式
typescript
import { RcIcon, IconName } from '@rchoui'
// 推荐：使用 IconName 常量
RcIcon({ name: IconName.HOME }) // 实底风格
RcIcon({ name: IconName.HOME_OUTLINE }) // 线型风格
// 不推荐：直接使用字符串
RcIcon({ name: 'icon-houi_home' }) // 容易拼写错误，无智能提示图标风格
- 线型风格（Outline）：图标名称以
_OUTLINE结尾，如IconName.HEART_OUTLINE - 实底风格（Filled）：图标名称不带后缀，如
IconName.HEART
常用图标示例
typescript
import { RcIcon, IconName } from '@rchoui'
Column({ space: 15 }) {
// 导航图标
RcIcon({ name: IconName.HOME })
RcIcon({ name: IconName.SEARCH })
RcIcon({ name: IconName.PERSON })
RcIcon({ name: IconName.SETTINGS })
// 操作图标
RcIcon({ name: IconName.PLUS })
RcIcon({ name: IconName.EDIT })
RcIcon({ name: IconName.TRASH })
RcIcon({ name: IconName.SAVE })
// 箭头图标
RcIcon({ name: IconName.ARROW_UP })
RcIcon({ name: IconName.ARROW_DOWN })
RcIcon({ name: IconName.ARROW_LEFT })
RcIcon({ name: IconName.ARROW_RIGHT })
// 状态图标
RcIcon({ name: IconName.CHECKMARK_CIRCLE })
RcIcon({ name: IconName.CLOSE_CIRCLE })
RcIcon({ name: IconName.ALERT_CIRCLE })
RcIcon({ name: IconName.INFO })
}图标数量
- 线型风格（Outline）：245 个图标
- 实底风格（Filled）：245 个图标
- 总计：490 个图标