Tukukkk

I'm trying to use the system proposed by vuejs cookbook for keeping svg icons (https://vuejs.org/v2/cookbook/editable-svg-icons.html)

So I have 2 components: IconBase and IconArrowUp. I need to change color of arrow icon on hover (also css transition should be applied).

In the article they have iconColor property. But I didn't manage to change the color using css, and it's not that convenient to use events like onmouseenter.

Here is the code of two components:

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>

And IconArrowUp.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>

So this is how I use them (another component ScrollToTop.vue):

<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>

How can I change to color of icon on hover? I want to keep IconArrowUp component clean though, so that if I need I use it without color change

You could make the fill conditional on a local Boolean that changes based on mouseover/mouseout events:

1. 
   

   In IconBase.vue, define a local data variable (e.g., named isHover) to track the hover state, and a prop to set the color during the hover state:

   
   
   

   props: [
   
     // ...
   
     iconHoverColor: {
   
       type: String,
   
       default: "currentColor"
   
     }
   
   ],
   
   data() {
   
     return {
   
       isHover: false
   
     }
   
   }
   
   

   
   


2. 
   

   Edit IconBase.vue's template to make fill conditional on isHover, and set isHover based on mouseover/mouseout events:

   
   
   

   <g :fill="isHover ? iconHoverColor : iconColor"
   
     @mouseover="isHover = true"
   
     @mouseout="isHover = false">
   
   

   
   


3. 
   

   To set the color transition, use CSS in IconBase.vue on a class applied to <g>:

   
   
   

   <style scoped>
   
     /* <g class="icon" ...> */
   
     .icon {
   
       transition: fill .4s ease;
   
     }
   
   </style>
   
   

   
   


4. 
   

   In ScrollToTop.vue, edit the usage of IconBase to set the hover color:

   
   
   

   <icon-base icon-hover-color="#ff0000" ...>
   
   

   
   

demo