如何将 bootstrap-vue 图标包含到 nuxtjs 中？导航栏向下箭头的问题

Question

编辑：嗯，可能有一个样式覆盖 -
我可以从下面的下拉菜单中使用。并将其粘贴到导航区域，向下箭头消失。“lang”下拉也可以这样说，如果我将它移到身体上，箭头就会显示出来..

编辑：FML - 这是另一个导航栏样式覆盖，使用范围大声笑

导航栏 svg downarrows 不会出现。大多数其他图标工作得很好..下面的代码几乎是复制和粘贴用于引导 vue 示例..

<b-navbar toggleable="lg" type="dark" >
    <b-navbar-brand href="#"><img src="" class="d-inline-block align-top" width="220" height="45"></b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#"></b-nav-item>
        <b-nav-item href="#">Home</b-nav-item>
        <b-nav-item href="#">Contact Us</b-nav-item>
        <b-nav-item href="#">FAQ</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item-dropdown  text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template v-slot:button-content>
            <em>Welcome, Friend</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>

有些图标可以工作，有些则不能。不会抛出任何错误。

文档说它们不是默认安装的......所以我用
https://icons.getbootstrap.com/#install https://bootstrap-vue.js.org/docs/icons/安装它们

npm i bootstrap-icons

我创建了一个包含 nuxt.config.js 的插件。
元素似乎都在正常工作，但图标..

 plugins: [
  '@/plugins/bootstrap-vue.js'
  ,'@/plugins/mixins/user.js'
],

/plugins/bootstrap.vue.js 下面

import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

我也尝试将它们具体包括在内

import {BootstrapVue,BIconArrowUp, BIconArrowDown } from 'bootstrap-vue'
Vue.use(BootstrapVue)
import { BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVueIcons)[![enter image description here][1]][1]
Vue.component('BIconArrowUp', BIconArrowUp)
Vue.component('BIconArrowDown', BIconArrowDown)

1) 我在 node_modules/bootstrap 文件夹中没有看到任何与图标相关的东西。
2) 我确实在 node_modules/bootstrap-vue 文件夹中看到了 bootstrap.vue-icon.*。它包含像 -icons.common.js、-icons.css。

我还尝试将图标直接添加到元素中，例如..

<b-nav-item-dropdown icon="circle-fill" text="Lang" right>

这是来自 bootstrap-vue 站点的截图，向下箭头图标显示正确。最底部的照片是我项目的一个片段，缺少箭头。

在这里，我<b>在我的项目中添加了一些其他组件，以查看图标、箭头是否正常工作。它们确实有效。



但是对于 b-navbar-dropdown .... 它们不起作用！

建议？

Answer 1

根据官方文档，BootstrapVue 默认不安装图标插件。

要在 Nuxt 中启用此功能，请编辑您的nuxt.config.js，'bootstrap-vue/nuxt'在modules数组中找到模块并将其更改为：

modules: [
  'bootstrap-vue/nuxt',

  // ...other modules
]

为此，使用内联配置：

modules: [
  'bootstrap-vue/nuxt', {
    icons: true
  }
]

或者如果你想要单独的模块配置：

modules: [
  'bootstrap-vue/nuxt'
],

bootstrapVue: {
  icons: true
}

Answer 2

Soviut 基本上是正确的，但内联配置选项将不起作用，但会抛出 Nuxt 致命错误。它只需要模块数组中的字符串。这个解决方案确实有效，但是它只是为 bootstrapVue 创建一个对象，指定图标：true：

modules: [
  'bootstrap-vue/nuxt'
],

bootstrapVue: {
  icons: true
}

Answer 3

我们可以像这样导入 BootstrapVueIcons：首先，编辑 bootstrap-vue.js 文件

我的 nuxtjs 项目 第二，将此内容添加到此文件中

import Vue from 'vue';

import { BootstrapVue ,BootstrapVueIcons} from 'bootstrap-vue';

Vue.use(BootstrapVue, {});

Vue.use(BootstrapVueIcons, {})

然后你就会得到它。