放置在Buefy Navbar中的图标无法正常工作

Question

我试图在导航栏中显示图标。

看文档here，似乎没有传递图标的道具，所以我的代码如下：

<b-navbar-item v-for="item in navItems" :key="item.text" tag="router-link" :to="{ path: item.route }">
    <div>
        <b-icon
            :icon="item.icon"
            size="is-small">
        </b-icon>
    </div>
    <div>
        {{item.text}}
    </div>
</b-navbar-item>

现在出现图标，但引入了两个内部div来解决以下两个问题：

在宽屏上（1）图标与菜单文本重叠，在移动设备上（2），图标和文本出现在不同的行上

一旦我在div中放置了类以实现水平对齐和间距，移动菜单就会在选择一个项目后自动停止关闭（通常应该如此）。

是否有更好的方法可以通过Navbar实现此目标，还是Sidebar是唯一的选择？