Css 如何在vuejs cookbook中的可编辑Svg图标系统中更改图标的颜色？

我正在尝试使用vuejs cookbook建议的系统来保存svg图标（）

所以我有两个组件：IconBase和iconup。我需要改变悬停时箭头图标的颜色（也应该应用css转换）

在本文中，它们具有

iconColor

属性。但是我没有使用css改变颜色，而且使用onMouseCenter这样的事件也不方便

以下是两个组件的代码：

IconBase.vue：

<template>
  <svg xmlns="http://www.w3.org/2000/svg"
       :width="width"
       :height="height"
       viewBox="0 0 100 100"
       role="presentation"
       @click="$emit('click')">
    <g :fill="iconColor">
      <slot />
    </g>
  </svg>
</template>

<script>
  export default {
    props: {
      width: {
        type: [Number, String],
        default: 18
      },
      height: {
        type: [Number, String],
        default: 18
      },
      iconColor: {
        type: String,
        default: 'currentColor'
      }
    }
  }
</script>

导出默认值{
道具：{
宽度：{
类型：[数字，字符串]，
默认值：18
},
高度：{
类型：[数字，字符串]，
默认值：18
},
iconColor:{
类型：字符串，
默认值：“currentColor”
}
}
}

和iconnearup.vue：

<template>
  <path d="m12.398 40.102 13.402 13.5 14.699-14.801v58.699h19v-58.699l14.699 14.801 13.402-13.5-37.602-37.602z"/>
</template>

这就是我如何使用它们（另一个组件ScrollToTop.vue）：

---

如何更改悬停图标的颜色？但是我想保持

iconnerrowup

组件的清洁，这样如果需要，我可以在不改变颜色的情况下使用它

如果悬停颜色始终相同，您可以简单地使用psuedo类。例如，当SVG容器悬停时，此CSS使图标变为蓝色，转换需要400毫秒：

/*  */
.图标{
过渡：填充。4s轻松；
}
svg:hover.icon{
填充：蓝色；
}

否则，如果悬停颜色是动态的，则使用JavaScript。您可以使

填充

以本地布尔值为条件，该布尔值根据

鼠标悬停

/

鼠标悬停

事件进行更改：

在

IconBase.vue

中，定义一个本地数据变量（例如名为

isHover

）来跟踪悬停状态，并定义一个

prop

来设置悬停状态期间的颜色：

道具：[
// ...
ICONHCOVERCOLOR：{
类型：字符串，
默认值：“currentColor”
}
],
数据（）{
返回{
伊肖弗：错
}
}

编辑

IconBase.vue

的模板，使

fill

以

isHover

为条件，并基于SVG容器的

mouseover

/

mouseout

事件设置

isHover

：

要设置颜色转换，请对应用于

的类使用CSS属性：

/*  */
.图标{
过渡：填充。4s轻松；
}

在

ScrollToTop.vue

中，编辑

IconBase

的用法以设置悬停颜色：

<template>
  <div class="scroll-to-top">
    <icon-base class="icon-arrow-up"
               width="20"
               height="20"
               icon-color="#949494">
      <icon-arrow-up/>
    </icon-base>
  </div>
</template>