Иконки

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

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

Использование

Иконки 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.

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

Укладка иконок

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

Примечания:

Использование в компонентах

Легко размещайте иконки в качестве контента в других компонентах.

Обратите внимание, что иконки, размещенные в компонентах 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, чтобы визуально скрыть эквивалентную метку.

Иконки

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

Обзор иконок
Показаны 1371 из 1371 иконок
  • 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

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

Свойства

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

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

Свойства

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

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

Свойства

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

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

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

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

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

Компонент
Именованный экспорт
Путь импорта
<b-icon>BIconbootstrap-vue
<b-icon-{icon-name}>BIcon{IconName}bootstrap-vue
<b-iconstack>BIconstackbootstrap-vue

Пример:

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

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт
Путь импорта
IconsPluginbootstrap-vue

Пример:

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

IconsPlugin также экспортируется как BootstrapVueIcons.