如何根据情况动态更改项目符号的颜色

<ul>
  <li id="item1">项目1</li>
  <li id="item2">项目2</li>
  <li id="item3">项目3</li>
</ul>

<script>
  // 获取元素并修改颜色
  document.getElementById("item1").style.color = "red";
  document.getElementById("item2").style.color = "green";
  document.getElementById("item3").style.color = "blue";
</script>

<svg id="icon" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 12H6V22H18V12H22L12 2Z" fill="#000000"/>
</svg>

<script>
  // 获取SVG元素并修改颜色
  document.getElementById("icon").setAttribute("fill", "red");
</script>

<span class="icon">项目1</span>

<script>
  // 获取包含字体图标的元素并修改颜色
  var iconElement = document.getElementsByClassName("icon")[0];
  iconElement.style.color = "red";
</script>