封装一个图标加载组件

封装一个图标加载组件通常是在Web或应用开发中为了管理图片资源和优化用户体验的一种常见做法。这个组件通常会负责以下几个关键功能：

1. **缓存处理**：通过将图标数据存储到内存或本地，避免频繁地从网络请求，提高性能。

2. **错误处理**：提供一种机制来处理图标加载失败的情况，比如显示默认图标、加载占位符图或给出友好的提示信息。

3. **异步加载**：图标加载应该是非阻塞的，不影响用户界面的其他操作，这通常通过`Promise`或`async/await`来实现。

4. **尺寸和格式适配**：如果图标有多种大小或格式版本，组件应该能够动态选择合适的资源，或者根据需要调整显示尺寸。

5. **API设计**：提供简单易用的接口供外部调用，例如`loadIcon(url)`或者接受预设的图标名称和大小作为参数。

以下是一个简单的JavaScript示例，展示如何创建这样一个基础的图标加载组件：

class IconLoader {
  constructor() {
    this.cache = new Map();
  }

  loadImage(url) {
    if (this.cache.has(url)) {
      return Promise.resolve(this.cache.get(url));
    }
    
    return fetch(url)
      .then(response => response.ok ? response.blob() : Promise.reject())
      .then(blob => {
        const img = document.createElement('img');
        img.src = URL.createObjectURL(blob);
        img.onload = () => {
          this.cache.set(url, img);
          URL.revokeObjectURL(img.src); // 清理资源
        };
        return img;
      })
      .catch(error => {
        console.error('Failed to load icon:', error);
        return this.getDefaultImage(); // 返回默认图像
      });
  }

  getDefaultImage() { /* 实现返回默认图片 */ }
}