vue 自定义svg 修改颜色

Vue中自定义SVG并修改颜色通常涉及到对SVG文件的直接操作或者使用Vue组件封装SVG。这里提供一个基本的方法来修改SVG组件内图形的颜色。

首先，你可以创建一个SVG文件，然后在Vue组件中导入这个SVG文件。在Vue组件中，你可以使用`<template>`标签里的`<svg>`标签来引用或嵌入SVG图形，并通过`:fill`属性来动态改变颜色。

下面是一个简单的例子：

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path :fill="svgColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    <!-- 其他SVG路径等图形 -->
  </svg>
</template>

<script>
export default {
  data() {
    return {
      svgColor: 'blue', // 初始颜色设置为蓝色
    };
  },
  methods: {
    changeColor(newColor) {
      this.svgColor = newColor; // 更改颜色的方法
    }
  }
}
</script>

在上面的例子中，`:fill="svgColor"`属性绑定了一个Vue数据属性，这个数据属性是一个变量`svgColor`。在组件的`data`函数中定义了`svgColor`并赋值为蓝色。你可以通过调用`changeColor`方法来改变SVG图形的颜色。

使用时，如果需要改变颜色，只需要在其他Vue方法中调用`changeColor`并传入新的颜色值即可。