即使导入 BIcon 也不显示引导图标

Question

在我的 nuxt.js bootstrap-vue 项目中：

我跟随 github 使用 bootstrap 图标： the link

我的代码：

      <b-icon variant="success" icon="arrow-up"></b-icon>
      <b-icon variant="success" icon="alert-triangle"></b-icon>

      <b-icon icon="alert-circle-fill" variant="success"></b-icon>

      <h2 class="group_title">Anime Wallpapers</h2>

...

<script>

  import { BIcon, BIconArrowUp } from 'bootstrap-vue'

  export default{
    data(){
      return {
        msg: 'hello vue'
      }
    },
    components: {
      BIcon
    }
  }
</script>

但是没有显示出来：

Answer 1

您导入了BIcon 并注册了它，但您没有注册请求的单个图标。

试试这个：

      <b-icon variant="success" icon="arrow-up"></b-icon>

      <b-icon icon="alert-circle-fill" variant="success"></b-icon>

      <h2 class="group_title">Anime Wallpapers</h2>

...

<script>

  import { BIcon, BIconArrowUp } from 'bootstrap-vue'

  export default{
    data(){
      return {
        msg: 'hello vue'
      }
    },
    components: {
      BIcon,
      BIconArrowUp // <- The icon needs to be registered with your page/app
    }
  }
</script>

请参阅提到您需要导入单个图标的文档：https://bootstrap-vue.org/docs/icons#usage