关于svg图标fill颜色后鼠标小手效果失败的问题

Question

如题，我将图标改了颜色后，样式cursor: pointer效果失效，请问怎么修改
`

<template>
<div>
    <div @click='handleFullscreen' class="menuclick-icon">
        <i :class="antdIconFullScreen" style="color:white;"></i>
        <!-- <i class="el-icon-full-screen"></i> -->
    </div>
</div>
</template>
<style lang="less" scoped>
.menuclick-icon  {
    &:hover {
        cursor: pointer;
    }
    .iconfont {
        font-size: 20px !important;
    }
    i {
        font-size: 20px !important;
    }
}

`
这是用i标签的，引用阿里的font
`

<div class="hamburger-contain" @click="toggleClick">
    <svg
        :class="{'is-active':isActive}"
        class="hamburger"
        viewBox="0 0 1024 1024"
        width="64"
        height="64"
        >
        <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
    </svg>
</div>
.hamburger-contain{
    line-height: 54px;
    float: left;
    padding: 0px 15px;
}
.hamburger {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
    fill: white //headyz
}
.hamburger.is-active {
    transform: rotate(180deg);
}

`
这是直接用svg的 用fill填充