鸿蒙 (HarmonyOS) 开发中系统 / 自定义矢量图标的名称与对应数字资源 ID映射表，这类 ID 主要用于 ArkTS 开发中加载矢量图标（SVG/Vector），避免硬编码字符串，提升项目可维护性。以下为你做分类整理 + 可直接复用的 ArkTS 使用方案，适配 HarmonyOS API 9/10/11+，贴合鸿蒙开发的最佳实践。

一、图标 ID 分类整理（核心常用类，按开发高频场景划分）

按基础操作、导航箭头、多媒体、设备 / 硬件、生活 / 工具、健康 / 运动、汽车相关、AI / 智能、状态 / 提示八大类划分，方便快速查找，剩余小众图标可按名称自行检索：

1. 基础操作（最常用）

1. 基础操作（最常用）

图标名称	ID	用途	图标名称	ID	用途
plus	125831481	加 / 新增	minus	125831484	减 / 删除
xmark	125831487	关闭 / 取消	checkmark	125831490	勾选 / 确认
gearshape	125831493	设置	trash	125831542	删除 / 回收站
share	125831499	分享	magnifyingglass	125831500	搜索
refresh(arrow_clockwise)	125831551	刷新	save	125831586	保存

2. 导航 / 箭头

图标名称	ID	用途	图标名称	ID	用途
chevron_left	125832663	左箭头	chevron_right	125832664	右箭头
chevron_up	125832665	上箭头	chevron_down	125832666	下箭头
arrow_up	125832671	向上箭头	arrow_down	125832675	向下箭头
arrow_left	125832679	向左箭头	arrow_right	125832680	向右箭头

3. 多媒体（音频 / 视频 / 图片 / 音乐）

图标名称	ID	用途	图标名称	ID	用途
play	125831825	播放	pause	125831824	暂停
speaker	125831503	音量	mic	125831758	麦克风
camera	125832421	相机	picture	125832430	图片 / 相册
music	125831849	音乐	video	125831738	视频

4. 设备 / 硬件（手机 / 耳机 / 电脑 / 外设）

图标名称	ID	用途	图标名称	ID	用途
phone	125831788	手机	pad	125832036	平板
matebook	125832037	笔记本	earphone	125832068	耳机
bluetooth	125831971	蓝牙	wifi	125832033	WIFI
battery	125831561	电池	usb	125835345	USB

5. 生活 / 工具（时间 / 日历 / 定位 / 文件）

图标名称	ID	用途	图标名称	ID	用途
clock	125832302	时钟	calendar	125832312	日历
local	125832180	定位 / 位置	folder	125831897	文件夹
doc	125831909	文档	keyboard	125832099	键盘

6. 健康 / 运动

图标名称	ID	用途	图标名称	ID	用途
heart	125831544	心率 / 心脏	dumbbell	125832991	健身 / 哑铃
figure_run	125833063	跑步	blood_oxygen	125832959	血氧

7. 汽车相关（鸿蒙智联 / 车机开发）

图标名称	ID	用途	图标名称	ID	用途
car	125832229	汽车	steeringwheel	125835335	方向盘
fuelpump	125832235	加油	ev_charger	125835259	充电桩

8. AI / 智能 / 状态提示

图标名称	ID	用途	图标名称	ID	用途
ai_edit	125831725	AI 编辑	AI_screenshot	125832778	AI 截屏
exclamationmark	125832649	警告 / 提示	info_circle	125832646	信息 / 说明
loading	125832529	加载中	success(checkmark_circle_fill)	125831492	成功

二、ArkTS 可直接复用的使用方案（核心）

鸿蒙开发中禁止硬编码数字 ID，推荐封装为枚举 (enum) 统一管理，结合Image/Icon组件加载矢量图标，以下方案适配Stage 模型，可直接复制到项目中使用。

步骤 1：封装图标 ID 枚举（统一管理，推荐放在common/enum/IconEnum.ets）

按上述分类封装，避免项目中到处写数字，便于后期修改 / 维护：

typescript

运行

/**
 * 鸿蒙矢量图标ID枚举
 * 统一管理图标ID，避免硬编码，按开发场景分类
 */
export enum IconResId {
  // 基础操作
  PLUS = 125831481,
  MINUS = 125831484,
  XMARK = 125831487,
  CHECKMARK = 125831490,
  SETTING = 125831493,
  TRASH = 125831542,
  SHARE = 125831499,
  SEARCH = 125831500,
  REFRESH = 125831551,
  SAVE = 125831586,
  // 导航箭头
  CHEVRON_LEFT = 125832663,
  CHEVRON_RIGHT = 125832664,
  ARROW_UP = 125832671,
  ARROW_DOWN = 125832675,
  // 多媒体
  PLAY = 125831825,
  PAUSE = 125831824,
  SPEAKER = 125831503,
  CAMERA = 125832421,
  // 设备
  PHONE = 125831788,
  WIFI = 125832033,
  BLUETOOTH = 125831971,
  // 状态提示
  WARNING = 125832649,
  INFO = 125832646,
  LOADING = 125832529,
  // 按需添加其他图标...
}

步骤 2：在组件中使用（3 种常用方式，适配 API 9+）

鸿蒙中加载数字 ID 对应的矢量图标，核心是通过Image组件（推荐）或Icon组件，结合pixelMap/矢量资源加载，以下是最常用的 3 种场景，可直接复用：

方式 1：基础使用（Image 组件加载矢量图标，推荐 API 10+）

typescript

运行

import { IconResId } from '../common/enum/IconEnum.ets';

@Entry
@Component
struct IconDemo {
  build() {
    Column({ space: 20 }) {
      // 加载「加号」图标，设置宽高/颜色
      Image(String(IconResId.PLUS))
        .width(24)
        .height(24)
        .fill(Color.Blue) // 矢量图标颜色修改

      // 加载「关闭」图标
      Image(String(IconResId.XMARK))
        .width(20)
        .height(20)
        .fill(Color.Grey)
    }
    .padding(30)
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

方式 2：结合 Button 使用（开发高频，比如操作按钮）

typescript

运行

import { IconResId } from '../common/enum/IconEnum.ets';

@Entry
@Component
struct ButtonIconDemo {
  build() {
    Row({ space: 10 }) {
      // 带图标的按钮：新增
      Button({ icon: String(IconResId.PLUS) }) {
        Text('新增').fontSize(14)
      }
      .type(ButtonType.Normal)
      .backgroundColor('#007DFF')
      .textColor(Color.White)

      // 带图标的按钮：删除
      Button({ icon: String(IconResId.TRASH) }) {
        Text('删除').fontSize(14)
      }
      .type(ButtonType.Normal)
      .backgroundColor('#FF4D4F')
      .textColor(Color.White)
    }
    .padding(30)
  }
}

方式 3：Icon 组件极简使用（API 9+，适合纯图标展示）

typescript

运行

import { IconResId } from '../common/enum/IconEnum.ets';

@Entry
@Component
struct SimpleIconDemo {
  build() {
    Column({ space: 20 }) {
      Icon(String(IconResId.SEARCH), 24, Color.Black)
      Icon(String(IconResId.SETTING), 24, Color.Grey)
      Icon(String(IconResId.CHECKMARK), 24, Color.Green)
    }
    .padding(30)
  }
}

三、鸿蒙开发图标使用关键注意事项

1. 矢量图标颜色修改：通过Image.fill()/Icon()的第三个参数修改，仅矢量图（SVG/Vector）支持，位图（PNG/JPG）不支持。
2. 宽高适配：建议使用24/20/16px（鸿蒙设计规范），避免非整数倍导致模糊。
3. 批量导入小众图标：如果需要使用分类外的图标，直接在IconEnum中添加即可，格式为图标名称 = 数字ID（名称大驼峰，符合 TS 规范）。
4. 资源类型校验：确保数字 ID 对应的是矢量资源，如果是位图，需通过$r('app.media.xxx')加载本地资源。
5. 跨设备适配：鸿蒙手机 / 平板 / 车机 / 手表的图标展示大小，可通过@MediaQuery结合屏幕尺寸动态调整。

四、扩展：批量生成枚举脚本（可选）

如果需要将全部图标 ID批量生成上述枚举，可使用Node.js 脚本快速转换（避免手动敲写），将你的原始图标 ID 文本保存为icon.txt，执行以下脚本即可生成IconEnum.ets：

javascript

运行

const fs = require('fs');
const path = require('path');

// 读取icon.txt文件（每行格式：iconName: 123456,）
const content = fs.readFileSync(path.join(__dirname, 'icon.txt'), 'utf-8');
const lines = content.split('\n').filter(line => line.trim() !== '');

// 生成枚举内容
let enumContent = '/** 鸿蒙矢量图标ID枚举 - 自动生成 */\nexport enum IconResId {\n';
lines.forEach(line => {
  const [name, id] = line.trim().replace(/,/g, '').split(':');
  if (name && id) {
    const bigCamel = name.replace(/_([a-z])/g, (_, c) => c.toUpperCase()).replace(/^[a-z]/, c => c.toUpperCase());
    enumContent += `  ${bigCamel} = ${id.trim()},\n`;
  }
});
enumContent += '}';

// 写入文件
fs.writeFileSync(path.join(__dirname, 'IconEnum.ets'), enumContent, 'utf-8');
console.log('枚举生成成功！');