vue实现修改hover的svg图标，并且hover时，有背景颜色

实现的效果图：

        

1.防止出现hover图标时，图标一动一动的效果，宽度高度要写在svg最外层的div上，hover只写背景颜色

实现的html代码：

<div @click="handleButtonClick()"  @mouseenter="changeNameStatus('edithoverFileName')"
 @mouseleave="changeNameStatus('editFilleName')" class="edit-icon" v-if="editInputStatus">
   <svg-icon :icon-class="editFileNameIcon" class="edit-name-icon" />
</div>

实现的js代码：

       

data() {
    return {
      editFileNameIcon:'editFilleName',
    }
},

methods:{
    changeFileNameStatus(){
      this.editFilleName = svgFileName;
    },
}

实现的css代码：

   

.edit-icon{
  width: 26px;
  height: 30px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 13px;
  cursor: pointer;
  &:hover{
    background: rgba(0, 0, 0, 0.1);
  }
}