vue3 多色svg

Vue 3 支持使用多色 SVG 图标。你可以直接在 Vue 组件中使用 SVG 标签，并为其指定 `fill` 属性来控制图标的颜色。下面是一个示例：

<template>
  <div>
    <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm0-4h-2v-6h2v6zm0-8h-2V7h2v2z" :fill="iconColor" />
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iconColor: 'red' // 设置图标的颜色
    };
  }
};
</script>

<style scoped>
.icon {
  width: 24px;
  height: 24px;
}
</style>

在上面的示例中，我们定义了一个 `iconColor` 数据属性，用于控制图标的颜色。你可以根据需要修改 `iconColor` 的值来改变图标的颜色。这里我们将图标的颜色设置为红色。

注意：为了正确显示多色 SVG 图标，确保 SVG 文件中的路径（`<path>`）元素没有硬编码的 `fill` 属性。你可以直接打开 SVG 文件并删除 `fill` 属性，然后使用 Vue 组件中的 `fill` 属性来控制图标的颜色。