如何在两次点击中在两个方向上旋转图标？

<div id="icon" class="rotate-icon"></div>

.rotate-icon {
  width: 50px;
  height: 50px;
  background-image: url('icon.png'); /* 替换为实际的图标路径 */
  background-size: cover;
  transition: transform 0.3s ease;
}

.rotate-icon.rotate-right {
  transform: rotate(90deg);
}

.rotate-icon.rotate-left {
  transform: rotate(-90deg);
}

var icon = document.getElementById('icon');
var clickCount = 0;

icon.addEventListener('click', function() {
  clickCount++;

  if (clickCount % 2 === 1) {
    icon.classList.remove('rotate-left');
    icon.classList.add('rotate-right');
  } else {
    icon.classList.remove('rotate-right');
    icon.classList.add('rotate-left');
  }
});