[Vuejs]-SVG box size larger than it should be

It could be mistake on their side, but I highly doubt someone as Font awesome would make mistake like that. Could you reproduce it in some snippet so I could try to figure that out?

Otherwise if you could fit the icon fine and you only worry about hover effect – I suggest to add this to svg and add hover effect on the circle.

svg { pointer-events: none; }

So its like this:

<font-awesome-layers class="mb-4 fa-6x">
    <router-link to="/accommodation" id="fa-bed">
        <font-awesome-icon icon="circle" />
        <font-awesome-icon
            icon="bed"
            transform="shrink-8, left-2"
            @mouseover="faHoverStyle('fa-bed')"
            @mouseout="faNormalStyle('fa-bed')"
        />
    </router-link>
</font-awesome-layers>

methods: {
    faHoverStyle(e) {
        e = document.getElementById(e);
        e.getElementsByClassName("fa-circle")[0].classList.add(
            "fa-circle-hover"
        );
    },
    faNormalStyle(e) {
        e = document.getElementById(e);
        e.getElementsByClassName("fa-circle")[0].classList.remove(
            "fa-circle-hover"
        );
    }
}

.fa-circle {
    color: $color3;
    transition: all 0.5s ease-in-out 0s;
}
.fa-circle-hover {
    color: $color1;
    transition: all 0.5s ease-in-out 0s;
}

Now you have hover on both images.