解决方案

1. 系统图标使用
   @Component
   struct SystemIcons {
    build() {
      Row({ space: 16 }) {
        // ✅ 使用系统图标
        Image($r{(}^{\prime }sys.media.oho{s}_i{c}_{p}ubli{c}_{a}d{d}^{\prime })).width(24).height(24).fillColor(Color.Black);Image($r(‘sys.media.ohos_ic_public_delete’))
         .width(24)
         .height(24)
         .fillColor(Color.Red);
        
        Image($r(‘sys.media.ohos_ic_public_search’))
         .width(24)
         .height(24);
     }
   }
   }
2. 自定义图标管理
   /**

• 图标资源管理类
  */
  export class AppIcons {
   // ✅ 统一管理图标资源
   static readonly ADD = $r(‘app.media.ic_add’);
   static readonly DELETE = $r(‘app.media.ic_delete’);
   static readonly EDIT = $r(‘app.media.ic_edit’);
   static readonly SEARCH = $r(‘app.media.ic_search’);
   static readonly FILTER = $r(‘app.media.ic_filter’);
   static readonly SETTINGS = $r(‘app.media.ic_settings’);
   
   // 功能模块图标
   static readonly ITEM = $r(‘app.media.ic_item’);
   static readonly HEALTH = $r(‘app.media.ic_health’);
   static readonly BABY = $r(‘app.media.ic_baby’);
   static readonly ASSET = $r(‘app.media.ic_asset’);
   static readonly FINANCE = $r(‘app.media.ic_finance’);
   
   // 状态图标
   static readonly SUCCESS = $r(‘app.media.ic_success’);
   static readonly WARNING = $r(‘app.media.ic_warning’);
   static readonly ERROR = $r(‘app.media.ic_error’);
   static readonly INFO = $r(‘app.media.ic_info’);
  }
  ​
  // ✅ 使用
  @Component
  struct IconUsage {
   build() {
     Row() {
       Image(AppIcons.ADD)
        .width(24)
        .height(24);
       
       Image(AppIcons.DELETE)
        .width(24)
        .height(24)
        .fillColor(Color.Red);
    }
  }
  }

3. 可复用图标组件
   /**

• 图标组件
  */
  @Component
  export struct AppIcon {
   @Prop icon: Resource;
   @Prop size: number = 24;
   @Prop color?: ResourceColor;
   
   build() {
     Image(this.icon)
      .width(this.size)
      .height(this.size)
      .fillColor(this.color)
      .objectFit(ImageFit.Contain);
  }
  }
  ​
  // ✅ 使用
  @Component
  struct IconDemo {
   build() {
     Row({ space: 16 }) {
       AppIcon({
         icon: AppIcons.ADD,
         size: 24,
         color: AppColors.PRIMARY
      })
       
       AppIcon({
         icon: AppIcons.DELETE,
         size: 32,
         color: Color.Red
      })
    }
  }
  }

4. 带标签的图标按钮
   /**

• 图标按钮组件
  */
  @Component
  export struct IconButton {
   @Prop icon: Resource;
   @Prop label: string;
   @Prop onClick?: () => void;
   @Prop iconSize: number = 24;
   @Prop iconColor?: ResourceColor;
   
   build() {
     Column({ space: 4 }) {
       Image(this.icon)
        .width(this.iconSize)
        .height(this.iconSize)
        .fillColor(this.iconColor);
       
       Text(this.label)
        .fontSize(12)
        .fontColor(‘#666666’);
    }
    .padding(8)
    .borderRadius(8)
    .onClick(() => {
       if (this.onClick) {
         this.onClick();
      }
    })
  }
  }
  ​
  // ✅ 使用
  @Component
  struct ActionBar {
   build() {
     Row({ space: 24 }) {
       IconButton({
         icon: AppIcons.ADD,
         label: ‘添加’,
         iconColor: AppColors.PRIMARY,
         onClick: () => {
           console.info(‘点击添加’);
        }
      })
       
       IconButton({
         icon: AppIcons.EDIT,
         label: ‘编辑’,
         onClick: () => {
           console.info(‘点击编辑’);
        }
      })
    }
  }
  }

5. 动态图标状态
   /**

• 可切换状态的图标
  /
  @Component
  struct ToggleIcon {
   @State isActive: boolean = false;
   
   build() {
     Image(this.isActive ? AppIcons.HEART_FILLED : AppIcons.HEART_OUTLINE)
      .width(24)
      .height(24)
      .fillColor(this.isActive ? Color.Red : ‘#999999’)
      .onClick(() => {
         animateTo({ duration: 200 }, () => {
           this.isActive = !this.isActive;
        });
      })
  }
  }
  ​
  /*
• 加载状态图标
  */
  @Component
  struct LoadingIcon {
   @State isLoading: boolean = true;
   
   build() {
     if (this.isLoading) {
       LoadingProgress()
        .width(24)
        .height(24)
        .color(AppColors.PRIMARY);
    } else {
       Image(AppIcons.SUCCESS)
        .width(24)
        .height(24)
        .fillColor(Color.Green);
    }
  }
  }

6. 图标大小规范
   /**

• 图标尺寸常量
  */
  export class IconSizes {
   static readonly SMALL = 16;    // 小图标
   static readonly NORMAL = 24;   // 常规图标
   static readonly LARGE = 32;    // 大图标
   static readonly XLARGE = 48;   // 超大图标
  }
  ​
  // ✅ 使用
  Image(AppIcons.ADD)
  .width(IconSizes.NORMAL)
  .height(IconSizes.NORMAL);
  图标格式选择
  SVG vs PNG
  特性 SVG PNG
  缩放 ✅ 无损 ❌ 失真
  颜色控制 ✅ fillColor ❌ 不可改
  文件大小 小 大
  适用场景 单色图标 复杂图片
  推荐方案
  // ✅ 推荐:单色图标用SVG
  resources/base/media/
   ic_add.svg         // 添加图标
   ic_delete.svg      // 删除图标
   ic_edit.svg        // 编辑图标
  ​
  // ✅ 推荐:复杂图片用PNG
  resources/base/media/
   bg_splash.png      // 启动页背景
   img_avatar.png     // 用户头像
   img_banner.png     // Banner图片
  实战案例
  案例1: 底部导航栏
  @Component
  struct TabBar {
   @State currentIndex: number = 0;
   
   private tabs: TabInfo[] = [
    { id: 0, icon: AppIcons.HOME, label: ‘首页’ },
    { id: 1, icon: AppIcons.CATEGORY, label: ‘分类’ },
    { id: 2, icon: AppIcons.PROFILE, label: ‘我的’ }
  ];
   
   @Builder
   buildTab(tab: TabInfo, index: number) {
     Column({ space: 4 }) {
       Image(tab.icon)
        .width(24)
        .height(24)
        .fillColor(this.currentIndex === index ? AppColors.PRIMARY : ‘#999999’);
       
       Text(tab.label)
        .fontSize(12)
        .fontColor(this.currentIndex === index ? AppColors.PRIMARY : ‘#999999’);
    }
  }
   
   build() {
     Row() {
       ForEach(this.tabs, (tab: TabInfo, index: number) => {
         this.buildTab(tab, index)
          .layoutWeight(1)
          .onClick(() => {
             this.currentIndex = index;
          })
      })
    }
    .width(‘100%’)
    .height(56)
    .backgroundColor(Color.White)
  }
  }
  案例2: 空状态页面
  @Component
  struct EmptyState {
   @Prop icon: Resource = AppIcons.EMPTY;
   @Prop message: string = ‘暂无数据’;
   @Prop actionText?: string;
   @Prop onAction?: () => void;
   
   build() {
     Column({ space: 16 }) {
       Image(this.icon)
        .width(120)
        .height(120)
        .fillColor(‘#CCCCCC’);
       
       Text(this.message)
        .fontSize(14)
        .fontColor(‘#999999’);
       
       if (this.actionText && this.onAction) {
         Button(this.actionText)
          .onClick(() => {
             if (this.onAction) {
               this.onAction();
            }
          });
      }
    }
    .width(‘100%’)
    .height(‘100%’)
    .justifyContent(FlexAlign.Center);
  }
  }
  ​
  // 使用
  EmptyState({
   icon: AppIcons.NO_DATA,
   message: ‘还没有添加物品’,
   actionText: ‘立即添加’,
   onAction: () => {
     router.pushUrl({ url: ‘pages/AddItemPage’ });
  }
  })
  最佳实践

1. 图标命名规范
   // ✅ 推荐命名
   ic_add.svg           // ic_功能.svg
   ic_delete.svg
   ic_home_filled.svg   // ic_功能_状态.svg
   ic_heart_outline.svg
   ​
   // ❌ 不推荐
   add.svg
   delete_icon.svg
   home.png
2. 统一管理
   // ✅ 推荐:集中管理
   export class AppIcons {
    static readonly ADD = KaTeX parse error: Expected 'EOF', got '}' at position 24: …edia.ic_add'); }̲ ​ // ❌ 不推荐:分散使…r(‘app.media.ic_add’));  // 到处硬编码
3. 响应式尺寸
   // ✅ 推荐:使用vp单位
   .width(24)  // vp,自动适配屏幕密度
   ​
   // ❌ 不推荐:使用px
   .width(‘24px’)  // 不同屏幕显示大小不一致
   总结
   图标管理要点:

✅ AppIcons统一管理资源 ✅ 单色图标用SVG+fillColor ✅ 封装AppIcon组件复用 ✅ 遵循命名规范 ✅ 使用vp单位响应式

规范的图标管理提升开发效率!