Иконки

Иконки Bootstrap предназначены для работы с компонентами Bootstrap, от элементов управления формой до навигации. Иконки Bootstrap представляют собой SVG, поэтому они быстро и легко масштабируются и могут быть оформлены с помощью CSS. Хотя они созданы для Bootstrap, они будут работать в любом проекте.

Компоненты иконок BootstrapVue созданы из svg-исходников bootstrap-icons v1.5.0. Иконки являются опциональными, что означает, что их необходимо явно импортировать, чтобы использовать. Они не устанавливаются по умолчанию. Вам не нужны bootstrap-icons в качестве зависимости.

Bootstrap Icons были представлены в BootstrapVue в выпуске v2.2.0.
Bootstrap Icons v1.0.0-alpha3 были добавлены в BootstrapVue v2.8.0.
Bootstrap Icons v1.0.0-alpha4 были добавлены в BootstrapVue v2.15.0.
Bootstrap Icons v1.0.0-alpha5 были добавлены в BootstrapVue v2.16.0.
Bootstrap Icons v1.0.0 были добавлены в BootstrapVue v2.17.0.
Bootstrap Icons v1.1.0 были добавлены в BootstrapVue v2.19.0.
Bootstrap Icons v1.2.0 были добавлены в BootstrapVue v2.21.0.
Bootstrap Icons v1.3.0 были добавлены в BootstrapVue v2.22.0.
Bootstrap Icons v1.4.0 были добавлены в BootstrapVue v2.22.0.
Bootstrap Icons v1.4.1 были добавлены в BootstrapVue v2.22.0.
Bootstrap Icons 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. Для эффектов анимации требуется пользовательский SCSS/CSS BootstrapVue.

Браузер

Иконки не устанавливаются по умолчанию в сборке браузера UMD, поэтому вы должны явно включить библиотеку иконок:

<head>
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.6.1/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@2.6.12/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@4.6.1/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@2.6.12/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">Иконка <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h2 mb-2">Иконка <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h3 mb-2">Иконка <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h4 mb-2">Иконка <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h5 mb-2">Иконка <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 -->

Вы также можете использовать свойство 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 предоставляют несколько свойств для применения базовых преобразований SVG к <svg>. Все преобразования могут быть объединены для дополнительного эффекта. Обратите внимание, что преобразования применяются к <svg> контенту, а не к ограничивающей рамке <svg>.

Перелистывание

Отразите иконку по горизонтали и/или по вертикали с помощью свойств flip-h и flip-v.

<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. Положительные значения будут вращать иконку по часовой стрелке, а отрицательные значения будут вращать иконку против часовой стрелки.

<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 -->

Обратите внимание, что любое flipping выполняется до применения поворота.

Масштабирование

Масштабируйте иконку любым положительным фактором с помощью свойства scale. Обратите внимание, что это изменяет визуальный размер иконки, но не физический размер шрифта. Чтобы проиллюстрировать это, мы добавили фоновый цвет для иконок.

<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.

Смещение

Сдвиг влияет на расположение иконки без изменения или перемещения контейнера 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, требуют пользовательского CSS BootstrapVue. Свойство animation транслируется в имя класса b-icon-animation-{animationName}.

Нужна анимация в другом стиле? Просто создайте пользовательский класс, определяющий анимацию, и примените этот класс к компоненту иконки, или создайте новый класс анимации в форме b-icon-animation-{animationName} и передайте имя пользовательской анимации в свойство animation.

Примечания к анимации:

С анимацией cylon движение влево-вправо (или движение вверх-вниз) расширяет ограничивающую рамку иконки на +/- 25%, поэтому вам может потребоваться настроить отступы или поля, чтобы компенсировать ваш вариант использования.
Длительность анимации можно настроить с помощью переменных SASS SCSS
Определяемые BootstrapVue анимационные эффекты этого компонента зависят от медиа-запроса prefers-reduced-motion. Дополнительную информацию см. в разделе с ограниченным движением нашей документации по специальным возможностям.
Анимация cylon получила свое название от «глаза» сайлонов из оригинального тв телесериала Battlestar Galactica 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, используют пользовательский CSS BootstrapVue для дополнительной компенсации стиля из-за текущих проблем с реализацией выравнивания иконок Bootstrap <svg>, а также для дополнительного эстетического масштабирования (иконки, размещенные в компонентах, перечисленных ниже, будут масштабироваться на 125%).

Кнопки

<template>
  <div>
    <b-button size="sm" class="mb-2">
      <b-icon icon="gear-fill" aria-hidden="true"></b-icon> Настройки
    </b-button>
    <br>
    <b-button variant="primary" class="mb-2">
      Оплатить сейчас <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> Выйти
    </b-button>
    <br>
    <b-button size="lg" variant="primary" class="mb-2">
      <b-icon icon="question-circle-fill" aria-label="Помощь"></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> Настройки
      </b-button>
      <b-button variant="outline-primary">
        <b-icon icon="person-fill"></b-icon> Аккаунт
      </b-button>
      <b-button variant="outline-primary">
        <b-icon icon="inbox-fill"></b-icon> Сообщения
      </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="Сохранить файл">
          <b-icon icon="cloud-upload" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Загрузить файл">
          <b-icon icon="cloud-download" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Новый документ">
          <b-icon icon="file-earmark" aria-hidden="true"></b-icon>
        </b-button>
      </b-button-group>
      <b-button-group class="mr-1">
        <b-button title="Выравнивание слева">
          <b-icon icon="text-left" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Выравнивание по центру">
          <b-icon icon="text-center" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Выравнивание справа">
          <b-icon icon="text-right" aria-hidden="true"></b-icon>
        </b-button>
      </b-button-group>
      <b-button-group>
        <b-button title="Жирный">
          <b-icon icon="type-bold" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Курсив">
          <b-icon icon="type-italic" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Подчеркивание">
          <b-icon icon="type-underline" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Зачеркнутый">
          <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="Условия поиска"></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="Введите новые теги, разделенные пробелом, запятой или точкой с запятой"
        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="me@example.com"></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> Настройки
      </template>
      <b-dropdown-item-button>
         <b-icon icon="lock-fill" aria-hidden="true"></b-icon>
         Заблокировано <span class="sr-only">(Нажмите, чтобы разблокировать)</span>
      </b-dropdown-item-button>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-group header="Выберите опцию" class="small">
        <b-dropdown-item-button>
           <b-icon icon="blank" aria-hidden="true"></b-icon>
           Опция А <span class="sr-only">(Не выбрано)</span>
        </b-dropdown-item-button>
        <b-dropdown-item-button>
           <b-icon icon="check" aria-hidden="true"></b-icon>
           Опция Б <span class="sr-only">(Selected)</span>
        </b-dropdown-item-button>
         <b-dropdown-item-button>
           <b-icon icon="blank" aria-hidden="true"></b-icon>
           Опция В <span class="sr-only">(Не выбрано)</span>
        </b-dropdown-item-button>
      </b-dropdown-group>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item-button>Некоторое действие</b-dropdown-item-button>
      <b-dropdown-item-button>Какое-то другое действие</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>
        Удалить
      </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 пропускает aria-label при использовании на нефокусируемых SVG. Таким образом, используйте атрибут aria-hidden="true" при использовании иконки и используйте CSS, чтобы визуально скрыть эквивалентную метку.

Иконки

Используйте проводник ниже для поиска и просмотра доступных иконок.

Обзор иконок

alarm
alarm-fill
align-bottom
align-center
align-end
align-middle
align-start
align-top
alt
app
app-indicator
archive
archive-fill
arrow90deg-down
arrow90deg-left
arrow90deg-right
arrow90deg-up
arrow-bar-down
arrow-bar-left
arrow-bar-right
arrow-bar-up
arrow-clockwise
arrow-counterclockwise
arrow-down
arrow-down-circle
arrow-down-circle-fill
arrow-down-left
arrow-down-left-circle
arrow-down-left-circle-fill
arrow-down-left-square
arrow-down-left-square-fill
arrow-down-right
arrow-down-right-circle
arrow-down-right-circle-fill
arrow-down-right-square
arrow-down-right-square-fill
arrow-down-short
arrow-down-square
arrow-down-square-fill
arrow-down-up
arrow-left
arrow-left-circle
arrow-left-circle-fill
arrow-left-right
arrow-left-short
arrow-left-square
arrow-left-square-fill
arrow-repeat
arrow-return-left
arrow-return-right
arrow-right
arrow-right-circle
arrow-right-circle-fill
arrow-right-short
arrow-right-square
arrow-right-square-fill
arrow-up
arrow-up-circle
arrow-up-circle-fill
arrow-up-left
arrow-up-left-circle
arrow-up-left-circle-fill
arrow-up-left-square
arrow-up-left-square-fill
arrow-up-right
arrow-up-right-circle
arrow-up-right-circle-fill
arrow-up-right-square
arrow-up-right-square-fill
arrow-up-short
arrow-up-square
arrow-up-square-fill
arrows-angle-contract
arrows-angle-expand
arrows-collapse
arrows-expand
arrows-fullscreen
arrows-move
aspect-ratio
aspect-ratio-fill
asterisk
at
award
award-fill
back
backspace
backspace-fill
backspace-reverse
backspace-reverse-fill
badge3d
badge3d-fill
badge4k
badge4k-fill
badge8k
badge8k-fill
badge-ad
badge-ad-fill
badge-ar
badge-ar-fill
badge-cc
badge-cc-fill
badge-hd
badge-hd-fill
badge-tm
badge-tm-fill
badge-vo
badge-vo-fill
badge-vr
badge-vr-fill
badge-wc
badge-wc-fill
bag
bag-check
bag-check-fill
bag-dash
bag-dash-fill
bag-fill
bag-plus
bag-plus-fill
bag-x
bag-x-fill
bank
bank2
bar-chart
bar-chart-fill
bar-chart-line
bar-chart-line-fill
bar-chart-steps
basket
basket2
basket2-fill
basket3
basket3-fill
basket-fill
battery
battery-charging
battery-full
battery-half
bell
bell-fill
bell-slash
bell-slash-fill
bezier
bezier2
bicycle
binoculars
binoculars-fill
blank
blockquote-left
blockquote-right
book
book-fill
book-half
bookmark
bookmark-check
bookmark-check-fill
bookmark-dash
bookmark-dash-fill
bookmark-fill
bookmark-heart
bookmark-heart-fill
bookmark-plus
bookmark-plus-fill
bookmark-star
bookmark-star-fill
bookmark-x
bookmark-x-fill
bookmarks
bookmarks-fill
bookshelf
bootstrap
bootstrap-fill
bootstrap-reboot
border
border-all
border-bottom
border-center
border-inner
border-left
border-middle
border-outer
border-right
border-style
border-top
border-width
bounding-box
bounding-box-circles
box
box-arrow-down
box-arrow-down-left
box-arrow-down-right
box-arrow-in-down
box-arrow-in-down-left
box-arrow-in-down-right
box-arrow-in-left
box-arrow-in-right
box-arrow-in-up
box-arrow-in-up-left
box-arrow-in-up-right
box-arrow-left
box-arrow-right
box-arrow-up
box-arrow-up-left
box-arrow-up-right
box-seam
braces
bricks
briefcase
briefcase-fill
brightness-alt-high
brightness-alt-high-fill
brightness-alt-low
brightness-alt-low-fill
brightness-high
brightness-high-fill
brightness-low
brightness-low-fill
broadcast
broadcast-pin
brush
brush-fill
bucket
bucket-fill
bug
bug-fill
building
bullseye
calculator
calculator-fill
calendar
calendar2
calendar2-check
calendar2-check-fill
calendar2-date
calendar2-date-fill
calendar2-day
calendar2-day-fill
calendar2-event
calendar2-event-fill
calendar2-fill
calendar2-minus
calendar2-minus-fill
calendar2-month
calendar2-month-fill
calendar2-plus
calendar2-plus-fill
calendar2-range
calendar2-range-fill
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
dash-circle
dash-circle-dotted
dash-circle-fill
dash-lg
dash-square
dash-square-dotted
dash-square-fill
diagram2
diagram2-fill
diagram3
diagram3-fill
diamond
diamond-fill
diamond-half
dice1
dice1-fill
dice2
dice2-fill
dice3
dice3-fill
dice4
dice4-fill
dice5
dice5-fill
dice6
dice6-fill
disc
disc-fill
discord
display
display-fill
distribute-horizontal
distribute-vertical
door-closed
door-closed-fill
door-open
door-open-fill
dot
download
droplet
droplet-fill
droplet-half
earbuds
easel
easel-fill
egg
egg-fill
egg-fried
eject
eject-fill
emoji-angry
emoji-angry-fill
emoji-dizzy
emoji-dizzy-fill
emoji-expressionless
emoji-expressionless-fill
emoji-frown
emoji-frown-fill
emoji-heart-eyes
emoji-heart-eyes-fill
emoji-laughing
emoji-laughing-fill
emoji-neutral
emoji-neutral-fill
emoji-smile
emoji-smile-fill
emoji-smile-upside-down
emoji-smile-upside-down-fill
emoji-sunglasses
emoji-sunglasses-fill
emoji-wink
emoji-wink-fill
envelope
envelope-fill
envelope-open
envelope-open-fill
eraser
eraser-fill
exclamation
exclamation-circle
exclamation-circle-fill
exclamation-diamond
exclamation-diamond-fill
exclamation-lg
exclamation-octagon
exclamation-octagon-fill
exclamation-square
exclamation-square-fill
exclamation-triangle
exclamation-triangle-fill
exclude
eye
eye-fill
eye-slash
eye-slash-fill
eyedropper
eyeglasses
facebook
file
file-arrow-down
file-arrow-down-fill
file-arrow-up
file-arrow-up-fill
file-bar-graph
file-bar-graph-fill
file-binary
file-binary-fill
file-break
file-break-fill
file-check
file-check-fill
file-code
file-code-fill
file-diff
file-diff-fill
file-earmark
file-earmark-arrow-down
file-earmark-arrow-down-fill
file-earmark-arrow-up
file-earmark-arrow-up-fill
file-earmark-bar-graph
file-earmark-bar-graph-fill
file-earmark-binary
file-earmark-binary-fill
file-earmark-break
file-earmark-break-fill
file-earmark-check
file-earmark-check-fill
file-earmark-code
file-earmark-code-fill
file-earmark-diff
file-earmark-diff-fill
file-earmark-easel
file-earmark-easel-fill
file-earmark-excel
file-earmark-excel-fill
file-earmark-fill
file-earmark-font
file-earmark-font-fill
file-earmark-image
file-earmark-image-fill
file-earmark-lock
file-earmark-lock2
file-earmark-lock2-fill
file-earmark-lock-fill
file-earmark-medical
file-earmark-medical-fill
file-earmark-minus
file-earmark-minus-fill
file-earmark-music
file-earmark-music-fill
file-earmark-pdf
file-earmark-pdf-fill
file-earmark-person
file-earmark-person-fill
file-earmark-play
file-earmark-play-fill
file-earmark-plus
file-earmark-plus-fill
file-earmark-post
file-earmark-post-fill
file-earmark-ppt
file-earmark-ppt-fill
file-earmark-richtext
file-earmark-richtext-fill
file-earmark-ruled
file-earmark-ruled-fill
file-earmark-slides
file-earmark-slides-fill
file-earmark-spreadsheet
file-earmark-spreadsheet-fill
file-earmark-text
file-earmark-text-fill
file-earmark-word
file-earmark-word-fill
file-earmark-x
file-earmark-x-fill
file-earmark-zip
file-earmark-zip-fill
file-easel
file-easel-fill
file-excel
file-excel-fill
file-fill
file-font
file-font-fill
file-image
file-image-fill
file-lock
file-lock2
file-lock2-fill
file-lock-fill
file-medical
file-medical-fill
file-minus
file-minus-fill
file-music
file-music-fill
file-pdf
file-pdf-fill
file-person
file-person-fill
file-play
file-play-fill
file-plus
file-plus-fill
file-post
file-post-fill
file-ppt
file-ppt-fill
file-richtext
file-richtext-fill
file-ruled
file-ruled-fill
file-slides
file-slides-fill
file-spreadsheet
file-spreadsheet-fill
file-text
file-text-fill
file-word
file-word-fill
file-x
file-x-fill
file-zip
file-zip-fill
files
files-alt
film
filter
filter-circle
filter-circle-fill
filter-left
filter-right
filter-square
filter-square-fill
flag
flag-fill
flower1
flower2
flower3
folder
folder2
folder2-open
folder-check
folder-fill
folder-minus
folder-plus
folder-symlink
folder-symlink-fill
folder-x
fonts
forward
forward-fill
front
fullscreen
fullscreen-exit
funnel
funnel-fill
gear
gear-fill
gear-wide
gear-wide-connected
gem
gender-ambiguous
gender-female
gender-male
gender-trans
geo
geo-alt
geo-alt-fill
geo-fill
gift
gift-fill
github
globe
globe2
google
graph-down
graph-up
grid
grid1x2
grid1x2-fill
grid3x2
grid3x2-gap
grid3x2-gap-fill
grid3x3
grid3x3-gap
grid3x3-gap-fill
grid-fill
grip-horizontal
grip-vertical
hammer
hand-index
hand-index-fill
hand-index-thumb
hand-index-thumb-fill
hand-thumbs-down
hand-thumbs-down-fill
hand-thumbs-up
hand-thumbs-up-fill
handbag
handbag-fill
hash
hdd
hdd-fill
hdd-network
hdd-network-fill
hdd-rack
hdd-rack-fill
hdd-stack
hdd-stack-fill
headphones
headset
headset-vr
heart
heart-fill
heart-half
heptagon
heptagon-fill
heptagon-half
hexagon
hexagon-fill
hexagon-half
hourglass
hourglass-bottom
hourglass-split
hourglass-top
house
house-door
house-door-fill
house-fill
hr
hurricane
image
image-alt
image-fill
images
inbox
inbox-fill
inboxes
inboxes-fill
info
info-circle
info-circle-fill
info-lg
info-square
info-square-fill
input-cursor
input-cursor-text
instagram
intersect
journal
journal-album
journal-arrow-down
journal-arrow-up
journal-bookmark
journal-bookmark-fill
journal-check
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
palette-fill
paperclip
paragraph
patch-check
patch-check-fill
patch-exclamation
patch-exclamation-fill
patch-minus
patch-minus-fill
patch-plus
patch-plus-fill
patch-question
patch-question-fill
pause
pause-btn
pause-btn-fill
pause-circle
pause-circle-fill
pause-fill
peace
peace-fill
pen
pen-fill
pencil
pencil-fill
pencil-square
pentagon
pentagon-fill
pentagon-half
people
people-fill
percent
person
person-badge
person-badge-fill
person-bounding-box
person-check
person-check-fill
person-circle
person-dash
person-dash-fill
person-fill
person-lines-fill
person-plus
person-plus-fill
person-square
person-x
person-x-fill
phone
phone-fill
phone-landscape
phone-landscape-fill
phone-vibrate
phone-vibrate-fill
pie-chart
pie-chart-fill
piggy-bank
piggy-bank-fill
pin
pin-angle
pin-angle-fill
pin-fill
pin-map
pin-map-fill
pip
pip-fill
play
play-btn
play-btn-fill
play-circle
play-circle-fill
play-fill
plug
plug-fill
plus
plus-circle
plus-circle-dotted
plus-circle-fill
plus-lg
plus-square
plus-square-dotted
plus-square-fill
power
printer
printer-fill
puzzle
puzzle-fill
question
question-circle
question-circle-fill
question-diamond
question-diamond-fill
question-lg
question-octagon
question-octagon-fill
question-square
question-square-fill
rainbow
receipt
receipt-cutoff
reception0
reception1
reception2
reception3
reception4
record
record2
record2-fill
record-btn
record-btn-fill
record-circle
record-circle-fill
record-fill
recycle
reddit
reply
reply-all
reply-all-fill
reply-fill
rss
rss-fill
rulers
safe
safe2
safe2-fill
safe-fill
save
save2
save2-fill
save-fill
scissors
screwdriver
sd-card
sd-card-fill
search
segmented-nav
server
share
share-fill
shield
shield-check
shield-exclamation
shield-fill
shield-fill-check
shield-fill-exclamation
shield-fill-minus
shield-fill-plus
shield-fill-x
shield-lock
shield-lock-fill
shield-minus
shield-plus
shield-shaded
shield-slash
shield-slash-fill
shield-x
shift
shift-fill
shop
shop-window
shuffle
signpost
signpost2
signpost2-fill
signpost-fill
signpost-split
signpost-split-fill
sim
sim-fill
skip-backward
skip-backward-btn
skip-backward-btn-fill
skip-backward-circle
skip-backward-circle-fill
skip-backward-fill
skip-end
skip-end-btn
skip-end-btn-fill
skip-end-circle
skip-end-circle-fill
skip-end-fill
skip-forward
skip-forward-btn
skip-forward-btn-fill
skip-forward-circle
skip-forward-circle-fill
skip-forward-fill
skip-start
skip-start-btn
skip-start-btn-fill
skip-start-circle
skip-start-circle-fill
skip-start-fill
skype
slack
slash
slash-circle
slash-circle-fill
slash-lg
slash-square
slash-square-fill
sliders
smartwatch
snow
snow2
snow3
sort-alpha-down
sort-alpha-down-alt
sort-alpha-up
sort-alpha-up-alt
sort-down
sort-down-alt
sort-numeric-down
sort-numeric-down-alt
sort-numeric-up
sort-numeric-up-alt
sort-up
sort-up-alt
soundwave
speaker
speaker-fill
speedometer
speedometer2
spellcheck
square
square-fill
square-half
stack
star
star-fill
star-half
stars
stickies
stickies-fill
sticky
sticky-fill
stop
stop-btn
stop-btn-fill
stop-circle
stop-circle-fill
stop-fill
stoplights
stoplights-fill
stopwatch
stopwatch-fill
subtract
suit-club
suit-club-fill
suit-diamond
suit-diamond-fill
suit-heart
suit-heart-fill
suit-spade
suit-spade-fill
sun
sun-fill
sunglasses
sunrise
sunrise-fill
sunset
sunset-fill
symmetry-horizontal
symmetry-vertical
table
tablet
tablet-fill
tablet-landscape
tablet-landscape-fill
tag
tag-fill
tags
tags-fill
telegram
telephone
telephone-fill
telephone-forward
telephone-forward-fill
telephone-inbound
telephone-inbound-fill
telephone-minus
telephone-minus-fill
telephone-outbound
telephone-outbound-fill
telephone-plus
telephone-plus-fill
telephone-x
telephone-x-fill
terminal
terminal-fill
text-center
text-indent-left
text-indent-right
text-left
text-paragraph
text-right
textarea
textarea-resize
textarea-t
thermometer
thermometer-half
thermometer-high
thermometer-low
thermometer-snow
thermometer-sun
three-dots
three-dots-vertical
toggle2-off
toggle2-on
toggle-off
toggle-on
toggles
toggles2
tools
tornado
translate
trash
trash2
trash2-fill
trash-fill
tree
tree-fill
triangle
triangle-fill
triangle-half
trophy
trophy-fill
tropical-storm
truck
truck-flatbed
tsunami
tv
tv-fill
twitch
twitter
type
type-bold
type-h1
type-h2
type-h3
type-italic
type-strikethrough
type-underline
ui-checks
ui-checks-grid
ui-radios
ui-radios-grid
umbrella
umbrella-fill
union
unlock
unlock-fill
upc
upc-scan
upload
vector-pen
view-list
view-stacked
vinyl
vinyl-fill
voicemail
volume-down
volume-down-fill
volume-mute
volume-mute-fill
volume-off
volume-off-fill
volume-up
volume-up-fill
vr
wallet
wallet2
wallet-fill
watch
water
whatsapp
wifi
wifi1
wifi2
wifi-off
wind
window
window-dock
window-sidebar
wrench
x
x-circle
x-circle-fill
x-diamond
x-diamond-fill
x-lg
x-octagon
x-octagon-fill
x-square
x-square-fill
youtube
zoom-in
zoom-out

Справочник по компонентам

`<b-icon>`

v2.2.0+ Функциональный компонент

Смотреть источник

<b-icon> Свойства

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`animation` v2.7.0+	`String`		Анимирует иконку. Поддерживаемые встроенные анимации: 'cylon', 'fade', 'pulse', 'spin' и 'throb'
`flip-h`	`Boolean`	`false`	Переворачивает иконку по горизонтали
`flip-v`	`Boolean`	`false`	Переворачивает иконку по вертикали
`font-scale`	`Number` или `String`	`1`	Масштабирует текущий размер шрифта иконки
`icon`	`String`		Имя иконки для отображения. Должен быть установлен соответствующий компонент иконки
`rotate`	`Number` или `String`	`0`	Поворачивает иконку на указанное число градусов. Положительные значения вращаются по часовой стрелке, а отрицательные значения вращаются против часовой стрелки
`scale`	`Number` или `String`	`1`	Масштабирует SVG иконку без увеличения размера шрифта
`shift-h`	`Number` или `String`	`0`	Перемещает иконку по горизонтали. Положительные числа сместят иконку вправо, отрицательные влево. Значение указано в единицах 1/16em
`shift-v`	`Number` или `String`	`0`	Перемещает иконку по вертикали. Положительные числа сместят иконку вверх, отрицательные вниз. Значение указано в единицах 1/16em
`stacked` v2.3.0+	`Boolean`	`false`	Устанавливает для этого свойства значение true при размещении внутри компонента BIconstack
`title` v2.17.0+	`String`		Текстовый контент для размещения в заголовке
`variant`	`String`		Контекстный цветовой вариант. По умолчанию иконка наследует текущий цвет текста

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

v2.2.0+ Функциональный компонент

<b-icon-{icon-name}> Свойства

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`animation` v2.7.0+	`String`		Анимирует иконку. Поддерживаемые встроенные анимации: 'spin', 'pulse' и 'cylon'
`flip-h`	`Boolean`	`false`	Переворачивает иконку по горизонтали
`flip-v`	`Boolean`	`false`	Переворачивает иконку по вертикали
`font-scale`	`Number` или `String`	`1`	Масштабирует текущий размер шрифта иконки
`rotate`	`Number` или `String`	`0`	Поворачивает иконку на указанное число градусов. Положительные значения вращаются по часовой стрелке, а отрицательные значения вращаются против часовой стрелки
`scale`	`Number` или `String`	`1`	Масштабирует SVG иконку без увеличения размера шрифта
`shift-h`	`Number` или `String`	`0`	Перемещает иконку по горизонтали. Положительные числа сместят иконку вправо, отрицательные влево. Значение указано в единицах 1/16em
`shift-v`	`Number` или `String`	`0`	Перемещает иконку по вертикали. Положительные числа сместят иконку вверх, отрицательные вниз. Значение указано в единицах 1/16em
`stacked` v2.3.0+	`Boolean`	`false`	Устанавливает для этого свойства значение true при размещении внутри компонента BIconstack
`title` v2.17.0+	`String`		Текстовый контент для размещения в заголовке
`variant`	`String`		Контекстный цветовой вариант. По умолчанию иконка наследует текущий цвет текста

`<b-iconstack>`

v2.3.0+ Функциональный компонент

Смотреть источник

<b-iconstack> Свойства

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`animation` v2.7.0+	`String`		Анимирует иконку. Поддерживаемые встроенные анимации: 'cylon', 'fade', 'pulse', 'spin' и 'throb'
`flip-h`	`Boolean`	`false`	Переворачивает иконку по горизонтали
`flip-v`	`Boolean`	`false`	Переворачивает иконку по вертикали
`font-scale`	`Number` или `String`	`1`	Масштабирует текущий размер шрифта иконки
`rotate`	`Number` или `String`	`0`	Поворачивает иконку на указанное число градусов. Положительные значения вращаются по часовой стрелке, а отрицательные значения вращаются против часовой стрелки
`scale`	`Number` или `String`	`1`	Масштабирует SVG иконку без увеличения размера шрифта
`shift-h`	`Number` или `String`	`0`	Перемещает иконку по горизонтали. Положительные числа сместят иконку вправо, отрицательные влево. Значение указано в единицах 1/16em
`shift-v`	`Number` или `String`	`0`	Перемещает иконку по вертикали. Положительные числа сместят иконку вверх, отрицательные вниз. Значение указано в единицах 1/16em
`title` v2.17.0+	`String`		Текстовый контент для размещения в заголовке
`variant`	`String`		Контекстный цветовой вариант. По умолчанию иконка наследует текущий цвет текста

Отдельные компоненты иконок здесь не перечислены из-за большого количества компонентов.

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент	Именованный экспорт	Путь импорта
`<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.