图标

Bootstrap 图标旨在与 Bootstrap 组件配合使用，从表单控件到导航。Bootstrap 图标是 SVG，因此它们可以快速轻松地缩放，并且可以使用 CSS 进行样式化。虽然它们是为 Bootstrap 构建的，但它们可以在任何项目中使用。

BootstrapVue 图标组件基于 bootstrap-icons v1.5.0 源 SVG 构建。图标是选择加入的，这意味着需要明确导入它们才能使用。它们不会默认安装。你不需要 bootstrap-icons 作为依赖项。

Bootstrap 图标在 BootstrapVue 的 v2.2.0 版本中引入。
Bootstrap 图标 v1.0.0-alpha3 在 BootstrapVue v2.8.0 中添加。
Bootstrap 图标 v1.0.0-alpha4 在 BootstrapVue v2.15.0 中添加。
Bootstrap 图标 v1.0.0-alpha5 在 BootstrapVue v2.16.0 中添加。
Bootstrap 图标 v1.0.0 在 BootstrapVue v2.17.0 中添加。
Bootstrap 图标 v1.1.0 在 BootstrapVue v2.19.0 中添加。
Bootstrap 图标 v1.2.0 在 BootstrapVue v2.21.0 中添加。
Bootstrap 图标 v1.3.0 在 BootstrapVue v2.22.0 中添加。
Bootstrap 图标 v1.4.0 在 BootstrapVue v2.22.0 中添加。
Bootstrap 图标 v1.4.1 在 BootstrapVue v2.22.0 中添加。
Bootstrap 图标 v1.5.0 在 BootstrapVue v2.22.0 中添加。

用法

在项目中使用 BootstrapVue 时，BootstrapVue 图标不会自动安装，您必须明确包含它们。

图标继承其父容器元素的当前字体颜色和字体大小。要更改图标的颜色，请参阅变体部分，要更改图标的大小，请参阅大小部分。

所有图标都以 PascalCase 中的名称导出，前缀为 BIcon。即图标 'alert-circle-fill' 导出为 BIconAlertCircleFill，图标 'x' 导出为 BIconX，图标 'x-square-fill' 导出为 BIconXSquareFill。

模块捆绑器

导入所有图标

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

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

或

import { Vue } from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

导入特定图标

使它们全局可用

import { Vue } from 'vue'
import { BootstrapVue, BIcon, BIconArrowUp, BIconArrowDown } from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.component('BIcon', BIcon)
Vue.component('BIconArrowUp', BIconArrowUp)
Vue.component('BIconArrowDown', BIconArrowDown)

或在特定页面或组件中使用

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

export default {
  components: {
    BIcon,
    BIconArrowUp,
    BIconArrowDown
  },
  props: {
    // ...
  }
  // ...
}

如果你在项目中仅使用 BootstrapVueIcons 或 IconsPlugin，你也可以仅导入所需的图标 CSS，而不是完整的 Bootstrap 和 BootstrapVue SCSS/CSS。

import { BootstrapVueIcons } from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue-icons.min.css'

Vue.use(BootstrapVueIcons)

或使用图标 SCSS 源

import { BootstrapVueIcons } from 'bootstrap-vue'
import 'bootstrap-vue/src/icons.scss'

Vue.use(BootstrapVueIcons)

BootstrapVue 图标 SCSS/CSS 不依赖于任何 Bootstrap SASS 变量、混合、函数或 CSS 类（除了 Bootstrap text-{variant} 文本颜色实用程序类，如果使用 variant 属性）。请注意，图标 CSS 也包含在主 BootstrapVue SCSS/CSS 文件中。动画效果需要 BootstrapVue 自定义 SCSS/CSS。

浏览器

默认情况下，图标不会安装在 UMD 浏览器版本中，因此你必须显式包含图标库

<head>
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
  <!-- Load Vue followed by BootstrapVue, and BootstrapVueIcons -->
  <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>

如果仅使用图标

<head>
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.css" />
  <!-- Load Vue followed by BootstrapVueIcons -->
  <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>

图标组件

你可以使用单个图标组件，或使用图标帮助器组件 <b-icon>，将图标放置在项目模板中。

所有单个图标组件都以名称 <b-icon-{name}> 为前缀，其中 {name} 是上面图标部分中列出的图标名称之一。

使用单个图标组件

<template>
  <div class="h2 mb-0">
    <b-icon-arrow-up></b-icon-arrow-up>
    <b-icon-exclamation-triangle-fill></b-icon-exclamation-triangle-fill>
  </div>
</template>

<!-- icons-individual-usage.vue -->

使用 <b-icon> 帮助器组件

<template>
  <div class="h2 mb-0">
    <b-icon icon="arrow-up"></b-icon>
    <b-icon icon="exclamation-triangle"></b-icon>
  </div>
</template>

<!-- icons-helper-usage.vue -->

注意：使用 <b-icon> 时，你必须还导入所需的单个图标组件，除非你正在使用 IconsPlugin 或 BootstrapVueIcons 插件。

变体

默认情况下，图标继承其父元素的当前文本颜色。所有图标组件都提供 variant 属性，以应用 Bootstrap 上下文文本变体颜色之一

<template>
  <div class="h2 mb-0">
    <b-icon icon="exclamation-circle-fill" variant="success"></b-icon>
    <b-icon icon="exclamation-circle-fill" variant="warning"></b-icon>
    <b-icon icon="exclamation-circle-fill" variant="danger"></b-icon>
    <b-icon icon="exclamation-circle-fill" variant="info"></b-icon>
    <b-icon icon="exclamation-circle-fill" variant="primary"></b-icon>
    <b-icon icon="exclamation-circle-fill" variant="secondary"></b-icon>
    <b-icon icon="exclamation-circle-fill" variant="dark"></b-icon>
  </div>
</template>

<!-- icons-color-variants.vue -->

你还可以使用自定义 CSS 来设置图标颜色，可以通过直接 style 属性或通过自定义类

<template>
  <div class="h2 mb-0">
    <b-icon icon="battery-full" style="color: #7952b3;"></b-icon>
  </div>
</template>

<!-- icons-color-css.vue -->

variant 属性将颜色实用程序类 text-{variant} 放置在图标的根元素上。

尺寸

图标的默认宽度和高度为 1em，这意味着它们将随当前字体大小的大小而缩放

<template>
  <div>
    <p class="h1 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h2 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h3 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h4 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h5 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
  </div>
</template>

<!-- icons-size-inherit.vue -->

您还可以使用自定义 CSS 设置图标大小，可以通过直接 style 属性或自定义类来设置

<template>
  <div>
    <b-icon icon="exclamation-circle" style="width: 120px; height: 120px;"></b-icon>
  </div>
</template>

<!-- icons-size-css.vue -->

您还可以使用 prop font-scale 根据指定因子缩放图标的当前字体大小

<template>
  <div>
    <b-icon icon="camera" font-scale="0.5"></b-icon>
    <b-icon icon="camera" font-scale="1"></b-icon>
    <b-icon icon="camera" font-scale="2"></b-icon>
    <b-icon icon="camera" font-scale="3"></b-icon>
    <b-icon icon="camera" font-scale="4"></b-icon>
    <b-icon icon="camera" font-scale="5"></b-icon>
    <b-icon icon="camera" font-scale="7.5"></b-icon>
  </div>
</template>

<!-- icons-size-font-size-prop.vue -->

另请参见下面的缩放变换部分，了解其他尺寸选项。

样式

通过使用 Bootstrap 的边框、背景和填充实用程序类，您可以创建各种样式效果

<template>
  <div style="font-size: 4rem;">
    <b-icon icon="bell-fill" class="border rounded p-2"></b-icon>
    <b-icon icon="bell-fill" class="border border-info rounded p-2" variant="info"></b-icon>
    <b-icon icon="bell-fill" class="rounded-circle bg-danger p-2" variant="light"></b-icon>
    <b-icon icon="unlock-fill" class="rounded bg-primary p-1" variant="light"></b-icon>
  </div>
</template>

<!-- icons-styling.vue -->

SVG 变换

BootstrapVue 图标提供了几个 prop，用于将基本 SVG 变换应用于 <svg>。所有变换都可以组合以增加效果。请注意，变换应用于 <svg> 内容，而不是 <svg> 边界框。

翻转

通过 flip-h 和 flip-v prop 水平和/或垂直翻转图标。

<template>
  <div style="font-size: 4rem;">
    <b-icon icon="bar-chart-fill"></b-icon>
    <b-icon icon="bar-chart-fill" flip-h></b-icon>
    <b-icon icon="bar-chart-fill" flip-v></b-icon>
    <b-icon icon="bar-chart-fill" flip-h flip-v></b-icon>
  </div>
</template>

<!-- icons-transform-flip.vue -->

旋转

通过 rotate prop 以指定角度旋转图标。正值将顺时针旋转图标，而负值将逆时针旋转图标。

<template>
  <div style="font-size: 4rem;">
    <b-icon icon="camera"></b-icon>
    <b-icon icon="camera" rotate="45"></b-icon>
    <b-icon icon="camera" rotate="90"></b-icon>
    <b-icon icon="camera" rotate="180"></b-icon>
    <b-icon icon="camera" rotate="270"></b-icon>
    <b-icon icon="camera" rotate="-45"></b-icon>
  </div>
</template>

<!-- icons-transform-rotate.vue -->

请注意，在应用旋转之前执行任何翻转。

缩放

通过 scale prop 以任何正因子缩放图标。请注意，这会更改图标的可视大小，但不会更改其物理字体大小。为了说明这一点，我们为图标添加了背景颜色。

<template>
  <b-row cols="2" cols-sm="4" class="text-center" style="font-size: 4rem;">
    <b-col class="mb-2">
      <b-icon icon="exclamation-circle" scale="0.5" class="bg-info"></b-icon>
    </b-col>
    <b-col class="mb-2">
      <b-icon icon="exclamation-circle" class="bg-info"></b-icon>
    </b-col>
    <b-col class="mb-2">
      <b-icon icon="exclamation-circle" scale="1.5" class="bg-info"></b-icon>
    </b-col>
    <b-col class="mb-2">
      <b-icon icon="exclamation-circle" scale="2" class="bg-info"></b-icon>
    </b-col>
  </b-row>
</template>

<!-- icons-transform-scale.vue -->

如果您需要背景和/或边框随图标缩放，请改用 font-scale prop。

平移

平移会影响图标位置，但不会更改或移动 svg 容器。若要在水平和/或垂直轴上移动图标，请对 shift-h 和 shift-v 属性使用任意数字值，包括小数。

对于 shift-v，正值会将图标向上移动，而负值会将图标向下移动。对于 shift-h，正值会将图标向右移动，而负值会向左移动。这两个属性都接受以 1/16em 为单位的值（相对于图标当前的字体大小）。

为了使示例更清晰，我们在图标上添加了背景色，以便你可以看到效果。

<template>
  <b-row cols="2" cols-sm="4" class="text-center" style="font-size: 4rem;">
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" shift-v="8" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" shift-v="-8" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" shift-h="8" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" shift-h="-8" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" shift-v="16" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" shift-h="-8" shift-v="-8" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon
        icon="exclamation-circle"
        scale="0.5"
        rotate="45"
        shift-h="-4"
        shift-v="4"
        class="bg-info"
      ></b-icon>
    </b-col>
  </b-row>
</template>

<!-- icons-transform-shift.vue -->

平移在所有旋转变换之后应用。与缩放一样，背景和边框不受影响。如果你需要将边框/背景与图标一起平移，请使用 Bootstrap 的边距间距实用程序类。

动画图标

v2.7.0+

BootstrapVue 为图标包含以下内置动画

'cylon' 将图标左右滑动
'cylon-vertical' 将图标上下滑动
'fade' 淡入淡出图标 2.12.0+
'spin' 平滑地顺时针旋转图标
'spin-reverse' 平滑地逆时针旋转图标
'spin-pulse' 顺时针旋转图标，但采用脉冲步进样式
'spin-reverse-pulse' 逆时针旋转图标，但采用脉冲步进样式
'throb' 缩放图标，使其淡入淡出 2.12.0+

若要使用动画，请将 animation 属性设置为上述动画名称之一。

<template>
  <b-row class="text-md-center">
    <b-col md="6" class="mb-3">
      <p>Cylon animation:</p>
      <b-icon icon="three-dots" animation="cylon" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Vertical cylon animation:</p>
      <b-icon icon="three-dots-vertical" animation="cylon-vertical" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Fade animation:</p>
      <b-icon icon="star-fill" animation="fade" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Spinning animation:</p>
      <b-icon icon="arrow-clockwise" animation="spin" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Reverse spinning animation:</p>
      <b-icon icon="arrow-counterclockwise" animation="spin-reverse" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Pulsing spin animation:</p>
      <b-icon icon="arrow-clockwise" animation="spin-pulse" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Reversed pulsing spin animation:</p>
      <b-icon icon="arrow-counterclockwise" animation="spin-reverse-pulse" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Throb animation:</p>
      <b-icon icon="circle-fill" animation="throb" font-scale="4"></b-icon>
    </b-col>
  </b-row>
</template>

<!-- b-icon-aminations.vue -->

由于动画基于 CSS，因此它们在任何 SVG 变换发生之后应用

<template>
  <div class="p-4">
    <b-icon icon="clock" animation="spin" font-scale="4" shift-v="8"></b-icon>
  </div>
</template>

<!-- b-icon-aminations-transforms.vue -->

BootstrapVue 定义的图标动画效果需要 BootstrapVue 的自定义 CSS。 animation 属性转换为类名 b-icon-animation-{animationName}。

需要不同的样式动画？只需创建一个定义动画的自定义类，并将该类应用于图标组件，或创建 b-icon-animation-{animationName} 形式的新动画类，并将自定义动画名称传递给 animation 属性。

动画说明

使用 cylon 动画时，左右移动（或上下移动）会超出图标边框 +/- 25%，因此你可能需要调整填充或边距以补偿你的用例。
动画持续时间可以通过配置 SASS SCSS 变量
此组件的 BootstrapVue 定义的动画效果取决于 prefers-reduced-motion 媒体查询。有关更多详细信息，请参阅无障碍文档的减少运动部分。
cylon 动画的名称来自 1978 年《太空堡垒卡拉狄加》电视连续剧中的赛隆人的“眼睛”。

堆叠图标

v2.3.0+

通过使用组件 <b-iconstack> 和单个图标上的 stacked 属性（<b-icon> 或 <b-icon-{icon-name}>）将图标组合在一起，以创建复杂的图标

<template>
  <div>
    <b-iconstack font-scale="5">
      <b-icon stacked icon="camera" variant="info" scale="0.75"></b-icon>
      <b-icon stacked icon="slash-circle" variant="danger"></b-icon>
    </b-iconstack>

    <b-iconstack font-scale="5" rotate="90">
      <b-icon stacked icon="chevron-right" shift-h="-4" variant="danger"></b-icon>
      <b-icon stacked icon="chevron-right" shift-h="0" variant="success"></b-icon>
      <b-icon stacked icon="chevron-right" shift-h="4" variant="primary"></b-icon>
    </b-iconstack>

    <b-iconstack font-scale="5">
      <b-icon stacked icon="circle-fill" variant="info"></b-icon>
      <b-icon stacked icon="bell-fill" scale="0.5" variant="white"></b-icon>
      <b-icon stacked icon="circle" variant="danger"></b-icon>
    </b-iconstack>

    <b-iconstack font-scale="5" variant="white">
      <b-icon stacked icon="square-fill" variant="dark"></b-icon>
      <b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="3" shift-h="-3"></b-icon>
      <b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="3" shift-h="3" rotate="90"></b-icon>
      <b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-3" shift-h="3" rotate="180"></b-icon>
      <b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-3" shift-h="-3" rotate="270"></b-icon>
    </b-iconstack>

    <b-iconstack font-scale="5">
      <b-icon stacked icon="square"></b-icon>
      <b-icon stacked icon="check"></b-icon>
    </b-iconstack>

    <b-iconstack font-scale="5">
      <b-icon stacked icon="square"></b-icon>
      <b-icon stacked icon="dot" shift-h="-3" shift-v="4"></b-icon>
      <b-icon stacked icon="dot" shift-h="-3"></b-icon>
      <b-icon stacked icon="dot" shift-h="-3" shift-v="-4"></b-icon>
      <b-icon stacked icon="dot" shift-h="3" shift-v="4"></b-icon>
      <b-icon stacked icon="dot" shift-h="3"></b-icon>
      <b-icon stacked icon="dot" shift-h="3" shift-v="-4"></b-icon>
    </b-iconstack>
  </div>
</template>

<!-- b-iconsstack.vue -->

<b-iconstack> 支持与单个图标上可用的相同的 variant、font-size、animation 和转换属性。

堆叠图标注释

请记住在内部图标组件上设置 stacked 属性！
font-scale 属性不能用于内部图标组件
width 和 height 属性不能应用于内部图标组件
堆叠图标不能堆叠在另一个 <b-iconstack> 内

堆叠图标动画

<b-iconstack> 组件支持与单个图标相同的动画

<template>
  <div>
    <b-iconstack font-scale="5" animation="spin">
      <b-icon stacked icon="camera" variant="info" scale="0.75" shift-v="-0.25"></b-icon>
      <b-icon stacked icon="slash-circle" variant="danger"></b-icon>
    </b-iconstack>
  </div>
</template>

<!-- b-iconstack-animation.vue -->

图标堆栈中的单个图标也可以被动画化（IE 11 除外）

<template>
  <div>
    <b-iconstack font-scale="5" animation="cylon">
      <b-icon
        stacked
        icon="camera"
        animation="throb"
        variant="info"
        scale="0.75"
      ></b-icon>
      <b-icon
        stacked
        icon="slash-circle"
        animation="spin-reverse"
        variant="danger"
      ></b-icon>
    </b-iconstack>
  </div>
</template>

<!-- b-iconstack-animation-child-icons.vue -->

注释

IE 11 不支持 SVG 中子元素的动画，因此只有 <b-iconstack> 组件可以被动画化。IE 11 用户将看不到子图标动画。
此组件的 BootstrapVue 定义的动画效果取决于 prefers-reduced-motion 媒体查询。有关更多详细信息，请参阅无障碍文档的减少运动部分。

在组件中使用

轻松地将图标作为内容放置在其他组件中。

请注意，放置在 BootstrapVue 组件中的图标使用 BootstrapVue 的自定义 CSS，以对齐 Bootstrap 图标 <svg> 实现的当前问题以及额外的美观缩放进行额外的样式补偿（放置在下面列出的组件中的图标的字体将按 125% 缩放）。

按钮

<template>
  <div>
    <b-button size="sm" class="mb-2">
      <b-icon icon="gear-fill" aria-hidden="true"></b-icon> Settings
    </b-button>
    <br>
    <b-button variant="primary" class="mb-2">
      Pay now <b-icon icon="credit-card" aria-hidden="true"></b-icon>
    </b-button>
    <br>
    <b-button variant="outline-info" class="mb-2">
      <b-icon icon="power" aria-hidden="true"></b-icon> Logout
    </b-button>
    <br>
    <b-button size="lg" variant="primary" class="mb-2">
      <b-icon icon="question-circle-fill" aria-label="Help"></b-icon>
    </b-button>
  </div>
</template>

<!-- icons-buttons.vue -->

按钮组和工具栏

按钮组

<template>
  <div>
    <b-button-group>
      <b-button variant="outline-primary">
        <b-icon icon="tools"></b-icon> Settings
      </b-button>
      <b-button variant="outline-primary">
        <b-icon icon="person-fill"></b-icon> Account
      </b-button>
      <b-button variant="outline-primary">
        <b-icon icon="inbox-fill"></b-icon> Messages
      </b-button>
    </b-button-group>
  </div>
</template>

<!-- icons-button-group.vue -->

<template>
  <div>
    <b-button-toolbar>
      <b-button-group class="mr-1">
        <b-button title="Save file">
          <b-icon icon="cloud-upload" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Load file">
          <b-icon icon="cloud-download" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="New document">
          <b-icon icon="file-earmark" aria-hidden="true"></b-icon>
        </b-button>
      </b-button-group>
      <b-button-group class="mr-1">
        <b-button title="Align left">
          <b-icon icon="text-left" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Align center">
          <b-icon icon="text-center" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Align right">
          <b-icon icon="text-right" aria-hidden="true"></b-icon>
        </b-button>
      </b-button-group>
      <b-button-group>
        <b-button title="Bold">
          <b-icon icon="type-bold" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Italic">
          <b-icon icon="type-italic" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Underline">
          <b-icon icon="type-underline" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Strikethrough">
          <b-icon icon="type-strikethrough" aria-hidden="true"></b-icon>
        </b-button>
      </b-button-group>
    </b-button-toolbar>
  </div>
</template>

<!-- icons-button-toolbar.vue -->

输入组

<template>
  <div>
    <b-input-group size="sm" class="mb-2">
      <b-input-group-prepend is-text>
        <b-icon icon="search"></b-icon>
      </b-input-group-prepend>
      <b-form-input type="search" placeholder="Search terms"></b-form-input>
    </b-input-group>
    <b-input-group class="mb-2">
      <b-input-group-prepend is-text>
        <b-icon icon="tag-fill"></b-icon>
      </b-input-group-prepend>
      <b-form-tags
        separator=" ,;"
        tag-variant="primary"
        placeholder="Enter new tags separated by space, comma or semicolon"
        no-add-on-enter
      ></b-form-tags>
    </b-input-group>
    <b-input-group class="mb-2">
      <b-input-group-prepend is-text>
        <b-icon icon="person-fill"></b-icon>
      </b-input-group-prepend>
      <b-form-input type="text" placeholder="User ID"></b-form-input>
    </b-input-group>
    <b-input-group size="lg">
      <b-input-group-prepend is-text>
        <b-icon icon="envelope"></b-icon>
      </b-input-group-prepend>
      <b-form-input type="email" placeholder="[email protected]"></b-form-input>
    </b-input-group>
  </div>
</template>

<!-- icons-input-groups.vue -->

列表组

<template>
  <b-list-group>
    <b-list-group-item class="d-flex justify-content-between align-items-center">
      <b-icon icon="x-circle" scale="2" variant="danger"></b-icon>
      Cras justo odio
    </b-list-group-item>
    <b-list-group-item class="d-flex justify-content-between align-items-center">
      <b-icon icon="exclamation-triangle-fill" scale="2" variant="warning"></b-icon>
      Dapibus ac facilisis in
    </b-list-group-item>
    <b-list-group-item class="d-flex justify-content-between align-items-center">
      <b-icon icon="info-circle-fill" scale="2" variant="info"></b-icon>
      Morbi leo risus
    </b-list-group-item>
    <b-list-group-item class="d-flex justify-content-between align-items-center">
      <b-icon icon="check-square" scale="2" variant="success"></b-icon>
      Incididunt veniam velit
    </b-list-group-item>
  </b-list-group>
</template>

<!-- icons-list-groups.vue -->

下拉菜单

<template>
  <div>
    <b-dropdown variant="primary">
      <template #button-content>
        <b-icon icon="gear-fill" aria-hidden="true"></b-icon> Settings
      </template>
      <b-dropdown-item-button>
         <b-icon icon="lock-fill" aria-hidden="true"></b-icon>
         Locked <span class="sr-only">(Click to unlock)</span>
      </b-dropdown-item-button>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-group header="Choose options" class="small">
        <b-dropdown-item-button>
           <b-icon icon="blank" aria-hidden="true"></b-icon>
           Option A <span class="sr-only">(Not selected)</span>
        </b-dropdown-item-button>
        <b-dropdown-item-button>
           <b-icon icon="check" aria-hidden="true"></b-icon>
           Option B <span class="sr-only">(Selected)</span>
        </b-dropdown-item-button>
         <b-dropdown-item-button>
           <b-icon icon="blank" aria-hidden="true"></b-icon>
           Option C <span class="sr-only">(Not selected)</span>
        </b-dropdown-item-button>
      </b-dropdown-group>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item-button>Some action</b-dropdown-item-button>
      <b-dropdown-item-button>Some other action</b-dropdown-item-button>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item-button variant="danger">
        <b-icon icon="trash-fill" aria-hidden="true"></b-icon>
        Delete
      </b-dropdown-item-button>
    </b-dropdown>
  </div>
</template>

<!-- icons-dropdowns.vue -->

使用 SVG

使用 SVG 非常棒，但它们确实有一些已知的问题需要解决。

Internet Explorer 和 Edge 中的焦点处理已损坏。我们已将属性 focusable="false" 添加到 <svg> 元素。您可以在图标组件上设置属性 focusable="false" 来覆盖此设置。
浏览器不一致地将 SVG 作为 <img> 标记与语音辅助一起播报。因此，我们已添加属性 role="img" 和 alt="icon"。您可以在需要时覆盖这些属性。
Safari 在对不可聚焦的 SVG 使用 aria-label 时会跳过。因此，在使用图标时使用属性 aria-hidden="true"，并使用 CSS 在视觉上隐藏等效标签。

图标

使用以下浏览器搜索和浏览可用图标。

图标浏览器

alarm
alarm-fill
align-bottom
align-center
align-end
align-middle
align-start
align-top
alt
app
app-indicator
archive
存档填充
向下箭头 90 度
向左箭头 90 度
向右箭头 90 度
向上箭头 90 度
向下箭头条
向左箭头条
向右箭头条
向上箭头条
顺时针箭头
逆时针箭头
向下箭头
向下箭头圆圈
向下箭头圆圈填充
向下向左箭头
向下向左箭头圆圈
向下向左箭头圆圈填充
向下向左箭头方块
向下向左箭头方块填充
向下向右箭头
向下向右箭头圆圈
向下向右箭头圆圈填充
向下向右箭头方块
向下向右箭头方块填充
短向下箭头
向下箭头方块
向下箭头方块填充
向下向上箭头
向左箭头
向左箭头圆圈
向左箭头圆圈填充
向左向右箭头
短向左箭头
向左箭头方块
向左箭头方块填充
重复箭头
向左返回箭头
向右返回箭头
向右箭头
向右箭头圆圈
向右箭头圆圈填充
短向右箭头
向右箭头方块
向右箭头方块填充
向上箭头
向上箭头圆圈
向上箭头圆圈填充
向上向左箭头
向上向左箭头圆圈
向上向左箭头圆圈填充
向上向左箭头方块
向上向左箭头方块填充
向上向右箭头
向上向右箭头圆圈
向上向右箭头圆圈填充
向上向右箭头方块
向上向右箭头方块填充
短向上箭头
向上箭头方块
向上箭头方块填充
箭头角度收缩
箭头角度展开
箭头折叠
箭头展开
箭头全屏
箭头移动
纵横比
纵横比填充
星号
at
奖励
奖励填充
返回
退格
退格填充
反向退格
反向退格填充
3D 徽章
3D 徽章填充
4k 徽章
4k 徽章填充
8k 徽章
8k 徽章填充
广告徽章
广告徽章填充
AR 徽章
AR 徽章填充
CC 徽章
CC 徽章填充
HD 徽章
HD 徽章填充
TM 徽章
TM 徽章填充
VO 徽章
VO 徽章填充
VR 徽章
VR 徽章填充
WC 徽章
WC 徽章填充
包
包勾选
包勾选填充
包破折号
包破折号填充
包填充
包加号
包加号填充
包 X
包 X 填充
银行
银行 2
条形图
填充条形图
线条条形图
填充线条条形图
阶梯条形图
购物篮
购物篮 2
填充购物篮 2
购物篮 3
填充购物篮 3
填充购物篮
电池
正在充电的电池
满电电池
半电电池
铃铛
填充铃铛
禁止铃铛
填充禁止铃铛
贝塞尔曲线
贝塞尔曲线 2
自行车
双筒望远镜
填充双筒望远镜
空白
左引号
右引号
书
填充书
半本书
书签
选中书签
填充选中书签
破折号书签
填充破折号书签
填充书签
心形书签
填充心形书签
加号书签
填充加号书签
星形书签
填充星形书签
叉号书签
填充叉号书签
书签
填充书签
书架
Bootstrap
填充 Bootstrap
Bootstrap 重启
边框
全部边框
下边框
居中边框
内部边框
左边框
中间边框
外部边框
右边框
边框样式
上边框
边框宽度
边界框
圆形边界框
方框
向下箭头方框
向左下箭头方框
向右下箭头方框
向内向下箭头方框
向内向左下箭头方框
向内向右下箭头方框
向内向左箭头方框
向内向右箭头方框
向内向上箭头方框
向内向左上箭头方框
向内向右上箭头方框
向左箭头方框
向右箭头方框
向上箭头方框
向左上箭头方框
向右上箭头方框
盒缝
大括号
砖块
公文包
填充公文包
高亮度
填充高亮度
低亮度
填充低亮度
高亮度
填充高亮度
低亮度
填充低亮度
广播
广播图钉
画笔
填充画笔
水桶
填充水桶
错误
填充错误
建筑物
靶心
计算器
填充计算器
日历
日历 2
选中日历 2
填充选中日历 2
日历 2 日期
填充日历 2 日期
日历 2 天
填充日历 2 天
日历 2 事件
填充日历 2 事件
填充日历 2
减号日历 2
填充减号日历 2
日历 2 月份
填充日历 2 月份
加号日历 2
填充加号日历 2
日历 2 范围
填充日历 2 范围
calendar2-week
calendar2-week-fill
calendar2-x
calendar2-x-fill
calendar3
calendar3-event
calendar3-event-fill
calendar3-fill
calendar3-range
calendar3-range-fill
calendar3-week
calendar3-week-fill
calendar4
calendar4-event
calendar4-range
calendar4-week
calendar-check
calendar-check-fill
calendar-date
calendar-date-fill
calendar-day
calendar-day-fill
calendar-event
calendar-event-fill
calendar-fill
calendar-minus
calendar-minus-fill
calendar-month
calendar-month-fill
calendar-plus
calendar-plus-fill
calendar-range
calendar-range-fill
calendar-week
calendar-week-fill
calendar-x
calendar-x-fill
camera
camera2
camera-fill
camera-reels
camera-reels-fill
camera-video
camera-video-fill
camera-video-off
camera-video-off-fill
capslock
capslock-fill
card-checklist
card-heading
card-image
card-list
card-text
caret-down
caret-down-fill
caret-down-square
caret-down-square-fill
caret-left
caret-left-fill
caret-left-square
caret-left-square-fill
caret-right
caret-right-fill
caret-right-square
caret-right-square-fill
caret-up
caret-up-fill
caret-up-square
caret-up-square-fill
cart
cart2
cart3
cart4
cart-check
cart-check-fill
cart-dash
cart-dash-fill
cart-fill
cart-plus
cart-plus-fill
cart-x
cart-x-fill
cash
cash-coin
cash-stack
cast
chat
chat-dots
chat-dots-fill
chat-fill
chat-left
chat-left-dots
chat-left-dots-fill
chat-left-fill
chat-left-quote
chat-left-quote-fill
chat-left-text
chat-left-text-fill
chat-quote
chat-quote-fill
chat-right
chat-right-dots
chat-right-dots-fill
chat-right-fill
chat-right-quote
chat-right-quote-fill
chat-right-text
chat-right-text-fill
chat-square
chat-square-dots
chat-square-dots-fill
chat-square-fill
chat-square-quote
chat-square-quote-fill
chat-square-text
chat-square-text-fill
chat-text
chat-text-fill
check
check2
check2-all
check2-circle
check2-square
check-all
check-circle
check-circle-fill
check-lg
check-square
check-square-fill
chevron-bar-contract
chevron-bar-down
chevron-bar-expand
chevron-bar-left
chevron-bar-right
chevron-bar-up
chevron-compact-down
chevron-compact-left
chevron-compact-right
chevron-compact-up
chevron-contract
chevron-double-down
chevron-double-left
chevron-double-right
chevron-double-up
chevron-down
chevron-expand
chevron-left
chevron-right
chevron-up
circle
circle-fill
circle-half
circle-square
clipboard
clipboard-check
clipboard-data
clipboard-minus
clipboard-plus
clipboard-x
clock
clock-fill
clock-history
cloud
cloud-arrow-down
cloud-arrow-down-fill
cloud-arrow-up
cloud-arrow-up-fill
cloud-check
cloud-check-fill
cloud-download
cloud-download-fill
cloud-drizzle
cloud-drizzle-fill
cloud-fill
cloud-fog
cloud-fog2
cloud-fog2-fill
cloud-fog-fill
cloud-hail
cloud-hail-fill
cloud-haze
cloud-haze1
cloud-haze2-fill
cloud-haze-fill
cloud-lightning
cloud-lightning-fill
cloud-lightning-rain
cloud-lightning-rain-fill
cloud-minus
cloud-minus-fill
cloud-moon
cloud-moon-fill
cloud-plus
cloud-plus-fill
cloud-rain
cloud-rain-fill
cloud-rain-heavy
cloud-rain-heavy-fill
cloud-slash
cloud-slash-fill
cloud-sleet
cloud-sleet-fill
cloud-snow
cloud-snow-fill
cloud-sun
cloud-sun-fill
cloud-upload
cloud-upload-fill
clouds
clouds-fill
cloudy
cloudy-fill
code
code-slash
code-square
coin
collection
collection-fill
collection-play
collection-play-fill
columns
columns-gap
command
compass
compass-fill
cone
cone-striped
controller
cpu
cpu-fill
credit-card
credit-card2-back
credit-card2-back-fill
credit-card2-front
credit-card2-front-fill
credit-card-fill
crop
cup
cup-fill
cup-straw
currency-bitcoin
currency-dollar
currency-euro
currency-exchange
currency-pound
currency-yen
cursor
cursor-fill
cursor-text
dash
虚线圆
虚线圆点
虚线圆填充
大虚线
虚线方块
虚线方块点
虚线方块填充
图表2
图表2填充
图表3
图表3填充
菱形
菱形填充
半菱形
骰子1
骰子1填充
骰子2
骰子2填充
骰子3
骰子3填充
骰子4
骰子4填充
骰子5
骰子5填充
骰子6
骰子6填充
圆盘
圆盘填充
不和谐
显示
显示填充
水平分布
垂直分布
关闭的门
关闭的门填充
打开的门
打开的门填充
点
下载
水滴
水滴填充
半水滴
耳塞
画架
画架填充
鸡蛋
鸡蛋填充
煎蛋
弹出
弹出填充
愤怒表情
愤怒表情填充
头晕表情
头晕表情填充
无表情
无表情填充
皱眉表情
皱眉表情填充
爱心表情
爱心表情填充
大笑表情
大笑表情填充
中立表情
中立表情填充
微笑表情
微笑表情填充
倒立微笑表情
倒立微笑表情填充
太阳镜表情
太阳镜表情填充
眨眼表情
眨眼表情填充
信封
信封填充
打开的信封
打开的信封填充
橡皮擦
橡皮擦填充
感叹号
圆圈感叹号
圆圈感叹号填充
菱形感叹号
菱形感叹号填充
大感叹号
八边形感叹号
八边形感叹号填充
方块感叹号
方块感叹号填充
三角形感叹号
三角形感叹号填充
排除
眼睛
眼睛填充
斜线眼睛
斜线眼睛填充
滴管
眼镜
脸书
文件
向下箭头文件
向下箭头文件填充
向上箭头文件
向上箭头文件填充
条形图文件
条形图文件填充
二进制文件
二进制文件填充
中断文件
中断文件填充
勾选文件
勾选文件填充
代码文件
代码文件填充
差异文件
差异文件填充
文件标记
向下箭头文件标记
向下箭头文件标记填充
向上箭头文件标记
文件耳标箭头向上填充
文件耳标条形图
文件耳标条形图填充
文件耳标二进制
文件耳标二进制填充
文件耳标断开
文件耳标断开填充
文件耳标勾选
文件耳标勾选填充
文件耳标代码
文件耳标代码填充
文件耳标差异
文件耳标差异填充
文件耳标画架
文件耳标画架填充
文件耳标 Excel
文件耳标 Excel 填充
文件耳标填充
文件耳标字体
文件耳标字体填充
文件耳标图像
文件耳标图像填充
文件耳标锁定
文件耳标锁定 2
文件耳标锁定 2 填充
文件耳标锁定填充
文件耳标医疗
文件耳标医疗填充
文件耳标减号
文件耳标减号填充
文件耳标音乐
文件耳标音乐填充
文件耳标 PDF
文件耳标 PDF 填充
文件耳标个人
文件耳标个人填充
文件耳标播放
文件耳标播放填充
文件耳标加号
文件耳标加号填充
文件耳标帖子
文件耳标帖子填充
文件耳标 PPT
文件耳标 PPT 填充
文件耳标富文本
文件耳标富文本填充
文件耳标规则
文件耳标规则填充
文件耳标幻灯片
文件耳标幻灯片填充
文件耳标电子表格
文件耳标电子表格填充
文件耳标文本
文件耳标文本填充
文件耳标 Word
文件耳标 Word 填充
文件耳标 X
文件耳标 X 填充
文件耳标 ZIP
文件耳标 ZIP 填充
文件画架
文件画架填充
文件 Excel
文件 Excel 填充
文件填充
文件字体
文件字体填充
文件图像
文件图像填充
文件锁定
文件锁定 2
文件锁定 2 填充
文件锁定填充
文件医疗
文件医疗填充
文件减号
文件减号填充
文件音乐
文件音乐填充
文件 PDF
文件 PDF 填充
文件个人
文件个人填充
文件播放
文件播放填充
文件加号
文件加号填充
文件帖子
文件帖子填充
文件 PPT
文件 PPT 填充
文件富文本
文件富文本填充
文件规则
文件规则填充
文件幻灯片
文件幻灯片填充
文件电子表格
文件电子表格填充
文件文本
文件文本填充
文件 Word
文件 Word 填充
文件 X
文件 X 填充
文件 ZIP
文件 ZIP 填充
文件
文件备用
电影
过滤器
过滤器圆形
过滤器圆形填充
过滤器左
过滤器右
过滤器方形
过滤器方形填充
旗帜
旗帜填充
花1
花2
花3
文件夹
文件夹2
文件夹2打开
文件夹勾选
文件夹填充
文件夹减号
文件夹加号
文件夹符号链接
文件夹符号链接填充
文件夹叉号
字体
前进
前进填充
正面
全屏
退出全屏
漏斗
漏斗填充
齿轮
齿轮填充
宽齿轮
宽齿轮连接
宝石
性别不明确
女性
男性
跨性别
地理
地理备用
地理备用填充
地理填充
礼物
礼物填充
github
地球
地球2
谷歌
向下图表
向上图表
网格
1x2网格
1x2网格填充
3x2网格
3x2网格间隔
3x2网格间隔填充
3x3网格
3x3网格间隔
3x3网格间隔填充
网格填充
水平握把
垂直握把
锤子
食指
食指填充
拇指食指
拇指食指填充
拇指朝下
拇指朝下填充
拇指朝上
拇指朝上填充
手提包
手提包填充
井号
硬盘
硬盘填充
网络硬盘
网络硬盘填充
硬盘架
硬盘架填充
硬盘堆叠
硬盘堆叠填充
耳机
耳机麦克风
VR耳机
心形
心形填充
半心形
七边形
七边形填充
半七边形
六边形
六边形填充
半六边形
沙漏
底部沙漏
分离沙漏
顶部沙漏
房子
房子门
房子门填充
房子填充
人力资源
飓风
图片
图片备用
图片填充
图片集
收件箱
收件箱填充
收件箱集
收件箱集填充
信息
信息圆圈
信息圆圈填充
大信息
信息方块
信息方块填充
输入光标
输入光标文本
instagram
相交
日记
日记相册
日记向下箭头
日记向上箭头
日记书签
日记书签填充
日记勾选
journal-code
journal-medical
journal-minus
journal-plus
journal-richtext
journal-text
journal-x
journals
joystick
justify
justify-left
justify-right
kanban
kanban-fill
key
key-fill
keyboard
keyboard-fill
ladder
lamp
lamp-fill
laptop
laptop-fill
layer-backward
layer-forward
layers
layers-fill
layers-half
layout-sidebar
layout-sidebar-inset
layout-sidebar-inset-reverse
layout-sidebar-reverse
layout-split
layout-text-sidebar
layout-text-sidebar-reverse
layout-text-window
layout-text-window-reverse
layout-three-columns
layout-wtf
life-preserver
lightbulb
lightbulb-fill
lightbulb-off
lightbulb-off-fill
lightning
lightning-charge
lightning-charge-fill
lightning-fill
link
link45deg
linkedin
list
list-check
list-nested
list-ol
list-stars
list-task
list-ul
lock
lock-fill
mailbox
mailbox2
map
map-fill
markdown
markdown-fill
mask
mastodon
megaphone
megaphone-fill
menu-app
menu-app-fill
menu-button
menu-button-fill
menu-button-wide
menu-button-wide-fill
menu-down
menu-up
messenger
mic
mic-fill
mic-mute
mic-mute-fill
minecart
minecart-loaded
moisture
moon
moon-fill
moon-stars
moon-stars-fill
mouse
mouse2
mouse2-fill
mouse3
mouse3-fill
mouse-fill
music-note
music-note-beamed
music-note-list
music-player
music-player-fill
newspaper
node-minus
node-minus-fill
node-plus
node-plus-fill
nut
nut-fill
octagon
octagon-fill
octagon-half
option
outlet
paint-bucket
palette
palette2
调色板填充
回形针
段落
补丁检查
补丁检查填充
补丁感叹号
补丁感叹号填充
补丁减号
补丁减号填充
补丁加号
补丁加号填充
补丁问号
补丁问号填充
暂停
暂停按钮
暂停按钮填充
暂停圆圈
暂停圆圈填充
暂停填充
和平
和平填充
钢笔
钢笔填充
铅笔
铅笔填充
铅笔方块
五边形
五边形填充
五边形一半
人
人填充
百分比
个人
个人徽章
个人徽章填充
个人边界框
个人检查
个人检查填充
个人圆圈
个人破折号
个人破折号填充
个人填充
个人线条填充
个人加号
个人加号填充
个人方块
个人 X
个人 X 填充
电话
电话填充
横向电话
横向电话填充
电话振动
电话振动填充
饼图
饼图填充
存钱罐
存钱罐填充
图钉
图钉角度
图钉角度填充
图钉填充
图钉地图
图钉地图填充
画中画
画中画填充
播放
播放按钮
播放按钮填充
播放圆圈
播放圆圈填充
播放填充
插头
插头填充
加号
加号圆圈
加号圆圈点
加号圆圈填充
大加号
加号方块
加号方块点
加号方块填充
电源
打印机
打印机填充
拼图
拼图填充
问号
问号圆圈
问号圆圈填充
问号菱形
问号菱形填充
大问号
问号八边形
问号八边形填充
问号方块
问号方块填充
彩虹
收据
收据截断
接收 0
接收 1
接收 2
接收 3
接收 4
记录
记录 2
记录 2 填充
记录按钮
记录按钮填充
记录圆圈
记录圆圈填充
记录填充
回收
Reddit
回复
全部回复
全部回复填充
回复填充
RSS
RSS 填充
尺子
安全
安全2
安全2-填充
安全-填充
保存
保存2
保存2-填充
保存-填充
剪刀
螺丝刀
SD 卡
SD 卡-填充
搜索
分段导航
服务器
分享
分享-填充
盾牌
盾牌-检查
盾牌-感叹号
盾牌-填充
盾牌-填充-检查
盾牌-填充-感叹号
盾牌-填充-减号
盾牌-填充-加号
盾牌-填充-X
盾牌-锁定
盾牌-锁定-填充
盾牌-减号
盾牌-加号
盾牌-阴影
盾牌-斜杠
盾牌-斜杠-填充
盾牌-X
Shift
Shift-填充
商店
橱窗
随机播放
路标
路标2
路标2-填充
路标-填充
路标-分割
路标-分割-填充
SIM
SIM-填充
向后跳
向后跳-按钮
向后跳-按钮-填充
向后跳-圆圈
向后跳-圆圈-填充
向后跳-填充
跳到结尾
跳到结尾-按钮
跳到结尾-按钮-填充
跳到结尾-圆圈
跳到结尾-圆圈-填充
跳到结尾-填充
向前跳
向前跳-按钮
向前跳-按钮-填充
向前跳-圆圈
向前跳-圆圈-填充
向前跳-填充
跳到开头
跳到开头-按钮
跳到开头-按钮-填充
跳到开头-圆圈
跳到开头-圆圈-填充
跳到开头-填充
Skype
Slack
斜杠
斜杠-圆圈
斜杠-圆圈-填充
斜杠-大
斜杠-正方形
斜杠-正方形-填充
滑块
智能手表
雪
雪2
雪3
按字母顺序降序排列
按字母顺序降序排列-备用
按字母顺序升序排列
按字母顺序升序排列-备用
向下排序
向下排序-备用
按数字顺序降序排列
按数字顺序降序排列-备用
按数字顺序升序排列
按数字顺序升序排列-备用
向上排序
向上排序-备用
声波
扬声器
扬声器-填充
速度计
速度计2
拼写检查
正方形
正方形-填充
半正方形
堆叠
星形
星形-填充
半星形
星星
便签
便签-填充
粘性
粘性-填充
停止
停止按钮
填充停止按钮
停止圆圈
填充停止圆圈
填充停止
交通灯
填充交通灯
秒表
填充秒表
减
梅花
填充梅花
方块
填充方块
红心
填充红心
黑桃
填充黑桃
太阳
填充太阳
太阳镜
日出
填充日出
日落
填充日落
水平对称
垂直对称
表格
平板电脑
填充平板电脑
横屏平板电脑
填充横屏平板电脑
标签
填充标签
标签
填充标签
电报
电话
填充电话
电话转接
填充电话转接
电话呼入
填充电话呼入
电话减号
填充电话减号
电话呼出
填充电话呼出
电话加号
填充电话加号
电话 X
填充电话 X
终端
填充终端
居中
左缩进
右缩进
左对齐
段落
右对齐
文本区域
文本区域调整大小
文本区域 T
温度计
温度计一半
温度计高
温度计低
温度计雪
温度计太阳
三个点
三个垂直点
切换 2 关闭
切换 2 打开
切换关闭
切换打开
切换
切换 2
工具
龙卷风
翻译
垃圾桶
垃圾桶 2
填充垃圾桶 2
填充垃圾桶
树
填充树
三角形
填充三角形
三角形一半
奖杯
填充奖杯
热带风暴
卡车
平板卡车
海啸
电视
填充电视
抽搐
推特
类型
粗体
一级标题
二级标题
三级标题
斜体
删除线
下划线
UI 检查
UI 检查网格
UI 单选按钮
UI 单选按钮网格
雨伞
填充雨伞
并集
解锁
解锁填充
upc
upc 扫描
上传
矢量笔
查看列表
查看堆叠
乙烯基
乙烯基填充
语音邮件
音量调低
音量调低填充
静音
静音填充
关闭音量
关闭音量填充
音量调高
音量调高填充
vr
钱包
钱包2
钱包填充
手表
水
WhatsApp
wifi
wifi1
wifi2
关闭 wifi
风
窗口
窗口停靠
窗口侧边栏
扳手
x
圆圈 x
圆圈 x 填充
菱形 x
菱形 x 填充
大号 x
八边形 x
八边形 x 填充
正方形 x
正方形 x 填充
YouTube
放大
缩小

组件参考

`<b-icon>`

v2.2.0+ 功能组件

查看源代码

<b-icon>属性

属性

所有属性默认值均为全局可配置。

属性 (单击按升序排列)	类型 (单击按升序排列)	默认值	描述
`动画` v2.7.0+	`字符串`		为图标添加动画。支持的内置动画有“cylon”、“fade”、“pulse”、“spin”和“throb”
`水平翻转`	`布尔值`	`false`	水平翻转图标
`垂直翻转`	`布尔值`	`false`	垂直翻转图标
`字体缩放`	`数字`或`字符串`	`1`	缩放图标的当前字体大小
`图标`	`字符串`		要渲染的图标名称。必须安装相应的图标组件
`旋转`	`数字`或`字符串`	`0`	按指定的度数旋转图标。正值顺时针旋转，而负值逆时针旋转
`缩放`	`数字`或`字符串`	`1`	缩放图标的 SVG，而不增加字体大小
`水平偏移`	`数字`或`字符串`	`0`	水平移动图标。正数向右移动图标，负数向左移动。值以 1/16em 为单位
`shift-v`	`数字`或`字符串`	`0`	垂直移动图标。正数将向上移动图标，负数向下移动。值以 1/16em 单位为单位
`stacked` v2.3.0+	`布尔值`	`false`	将此属性设置为 true，以便将其放置在 BIconstack 组件内
`title` v2.17.0+	`字符串`		要放置在标题中的文本内容
`variant`	`字符串`		上下文颜色变体。默认情况下，图标继承当前文本颜色

`<b-icon-{icon-name}>`

v2.2.0+ 功能组件

<b-icon-{icon-name}> 属性

属性

所有属性默认值均为全局可配置。

属性 (单击按升序排列)	类型 (单击按升序排列)	默认值	描述
`动画` v2.7.0+	`字符串`		为图标添加动画。支持的内置动画为“spin”、“pulse”和“cylon”
`水平翻转`	`布尔值`	`false`	水平翻转图标
`垂直翻转`	`布尔值`	`false`	垂直翻转图标
`字体缩放`	`数字`或`字符串`	`1`	缩放图标的当前字体大小
`旋转`	`数字`或`字符串`	`0`	按指定的度数旋转图标。正值顺时针旋转，而负值逆时针旋转
`缩放`	`数字`或`字符串`	`1`	缩放图标的 SVG，而不增加字体大小
`水平偏移`	`数字`或`字符串`	`0`	水平移动图标。正数向右移动图标，负数向左移动。值以 1/16em 为单位
`shift-v`	`数字`或`字符串`	`0`	垂直移动图标。正数将向上移动图标，负数向下移动。值以 1/16em 单位为单位
`stacked` v2.3.0+	`布尔值`	`false`	将此属性设置为 true，以便将其放置在 BIconstack 组件内
`title` v2.17.0+	`字符串`		要放置在标题中的文本内容
`variant`	`字符串`		上下文颜色变体。默认情况下，图标继承当前文本颜色

`<b-iconstack>`

v2.3.0+ 函数式组件

查看源代码

<b-iconstack> 属性

属性

所有属性默认值均为全局可配置。

属性 (单击按升序排列)	类型 (单击按升序排列)	默认值	描述
`动画` v2.7.0+	`字符串`		为图标添加动画。支持的内置动画有“cylon”、“fade”、“pulse”、“spin”和“throb”
`水平翻转`	`布尔值`	`false`	水平翻转图标
`垂直翻转`	`布尔值`	`false`	垂直翻转图标
`字体缩放`	`数字`或`字符串`	`1`	缩放图标的当前字体大小
`旋转`	`数字`或`字符串`	`0`	按指定的度数旋转图标。正值顺时针旋转，而负值逆时针旋转
`缩放`	`数字`或`字符串`	`1`	缩放图标的 SVG，而不增加字体大小
`水平偏移`	`数字`或`字符串`	`0`	水平移动图标。正数向右移动图标，负数向左移动。值以 1/16em 为单位
`shift-v`	`数字`或`字符串`	`0`	垂直移动图标。正数将向上移动图标，负数向下移动。值以 1/16em 单位为单位
`title` v2.17.0+	`字符串`		要放置在标题中的文本内容
`variant`	`字符串`		上下文颜色变体。默认情况下，图标继承当前文本颜色

由于组件数量众多，此处未列出各个图标组件。

导入各个组件

你可以通过以下命名导出将各个组件导入到你的项目中

组件	命名导出	导入路径
`<b-icon>`	`BIcon`	`bootstrap-vue`
`<b-icon-{icon-name}>`	`BIcon{IconName}`	`bootstrap-vue`
`<b-iconstack>`	`BIconstack`	`bootstrap-vue`

示例

import { BIcon } from 'bootstrap-vue'
Vue.component('b-icon', BIcon)

作为 Vue.js 插件导入

此插件包括上述所有列出的各个组件。插件还包括任何组件别名。

命名导出	导入路径
`IconsPlugin`	`bootstrap-vue`

示例

import { IconsPlugin } from 'bootstrap-vue'
Vue.use(IconsPlugin)

IconsPlugin 也导出为 BootstrapVueIcons。

用法

模块捆绑器

浏览器

图标组件

变体

尺寸

样式

SVG 变换

翻转

旋转

缩放

平移

动画图标

堆叠图标

堆叠图标动画

在组件中使用

按钮

按钮组和工具栏

按钮组

按钮工具栏

输入组

列表组

下拉菜单

使用 SVG

图标

组件参考

属性

属性

属性

导入各个组件

作为 Vue.js 插件导入