如何在添加新图标时自动调整图标大小？

<div id="icon-container">
  <i class="fas fa-heart"></i>
</div>

#icon-container {
  width: 100px;
  height: 100px;
}

.fa-heart {
  font-size: 50px;
}

const iconContainer = document.getElementById('icon-container');

function resizeIcon() {
  const containerWidth = iconContainer.offsetWidth;
  const containerHeight = iconContainer.offsetHeight;
  const icon = iconContainer.querySelector('.fa-heart');
  
  // 根据容器大小计算图标的新大小
  const newSize = Math.min(containerWidth, containerHeight);
  
  // 设置图标的新大小
  icon.style.fontSize = newSize + 'px';
}

// 监听图标容器的大小变化事件
window.addEventListener('resize', resizeIcon);

// 页面加载完成后初始化图标大小
window.addEventListener('load', resizeIcon);