uniapp中图片的icon图标的颜色如何动态修改

在UniApp中，如果想要动态修改图标图片的颜色，可以使用一些CSS技术结合JavaScript来实现。你可以通过设置伪元素或者使用CSS变量来改变颜色。这里有一个简单的示例：

1. 首先，确保你的图片是SVG图标，因为SVG支持颜色动态修改。

<template>
  <uni-icon :value="currentColor" :size="24" class="dynamic-icon"></uni-icon>
</template>

2. 然后，在CSS部分，你可以创建一个`:before`伪元素，并应用一个动态的color属性：

.dynamic-icon:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url('your-svg-icon.svg');
}

:root {
  --icon-color: red; /* 设置默认颜色 */
}

_DYNAMIC_ICON_COLOR {
  color: var(--icon-color);
}

3. JavaScript部分，你可以创建一个数据属性来控制当前颜色，例如：

export default {
  data() {
    return {
     currentColor: 'var(--icon-color)', // 或者直接使用一个特定的颜色值
    };
  },
  methods: {
    changeColor(newColor) {
      this.currentColor = newColor;
    }
  },
}

然后在需要的地方调用`changeColor()`方法来更新颜色：

this.changeColor('blue');