@gitlab/ui 94.6.1 → 94.7.0

package/src/vendor/bootstrap-vue/src/icons/README.md

@@ -1,874 +0,0 @@
-# Icons
-
-> Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation.
-> Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. While they
-> are built for Bootstrap, they will work in any project.
-
-BootstrapVue icon components are built from
-[`bootstrap-icons` v{{ bootstrapIconsVersion }}](https://icons.getbootstrap.com/) source SVGs. Icons
-are opt-in, meaning that they explicitly need to be imported in order to be used. They are not
-installed by default. You do not need `bootstrap-icons` as a dependency.
-
-- [Bootstrap Icons](https://blog.getbootstrap.com/2019/11/26/bootstrap-icons/) were introduced to
-  BootstrapVue in release `v2.2.0`.
-- [Bootstrap Icons `v1.0.0-alpha3`](https://blog.getbootstrap.com/2020/03/19/bootstrap-icons-alpha-3/)
-  were added in BootstrapVue `v2.8.0`.
-- [Bootstrap Icons `v1.0.0-alpha4`](https://blog.getbootstrap.com/2020/05/21/bootstrap-icons-alpha4/)
-  were added in BootstrapVue `v2.15.0`.
-- [Bootstrap Icons `v1.0.0-alpha5`](https://blog.getbootstrap.com/2020/06/26/bootstrap-icons-alpha5/)
-  were added in BootstrapVue `v2.16.0`.
-- [Bootstrap Icons `v1.0.0`](https://blog.getbootstrap.com/2020/08/28/bootstrap-icons-stable/) were
-  added in BootstrapVue `v2.17.0`.
-- [Bootstrap Icons `v1.1.0`](https://blog.getbootstrap.com/2020/10/28/bootstrap-icons-1-1-0/) were
-  added in BootstrapVue `v2.19.0`.
-- [Bootstrap Icons `v1.2.0`](https://blog.getbootstrap.com/2020/12/11/bootstrap-icons-1-2-0/) were
-  added in BootstrapVue `v2.21.0`.
-- [Bootstrap Icons `v1.3.0`](https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/) were
-  added in BootstrapVue `v2.22.0`.
-- [Bootstrap Icons `v1.4.0`](https://blog.getbootstrap.com/2021/02/22/bootstrap-icons-1-4-0/) were
-  added in BootstrapVue `v2.22.0`.
-- [Bootstrap Icons `v1.4.1`](https://blog.getbootstrap.com/2021/03/29/bootstrap-icons-1-4-1/) were
-  added in BootstrapVue `v2.22.0`.
-- [Bootstrap Icons `v1.5.0`](https://blog.getbootstrap.com/2021/05/10/bootstrap-icons-1-5-0/) were
-  added in BootstrapVue `v2.22.0`.
-
-## Usage
-
-BootstrapVue icons are not automatically installed when using BootstrapVue in your project, you must
-explicitly include them.
-
-Icons inherit the current font color and font size from their parent container element. To change
-the color of the icon, refer to the [Variants](#variants) section, and to change the size of the
-icon refer to the [Sizing](#sizing) section.
-
-All icons are exported with the name in <samp>PascalCase</samp>, prefixed with <samp>BIcon</samp>.
-i.e icon `'alert-circle-fill'` is exported as `BIconAlertCircleFill`, icon `'x'` is exported as
-`BIconX`, and icon `'x-square-fill'` is exported as `BIconXSquareFill`.
-
-### Module bundlers
-
-**Importing all icons:**
-
-```js
-import { Vue } from 'vue'
-import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
-
-Vue.use(BootstrapVue)
-Vue.use(BootstrapVueIcons)
-```
-
-Or
-
-```js
-import { Vue } from 'vue'
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
-
-Vue.use(BootstrapVue)
-Vue.use(IconsPlugin)
-```
-
-**Importing specific icons:**
-
-Making them globally available:
-
-```js
-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)
-```
-
-Or if using in specific pages or components:
-
-```js
-import { BIcon, BIconArrowUp, BIconArrowDown } from 'bootstrap-vue'
-
-export default {
-  components: {
-    BIcon,
-    BIconArrowUp,
-    BIconArrowDown
-  },
-  props: {
-    // ...
-  }
-  // ...
-}
-```
-
-If you are using _only_ `BootstrapVueIcons` or `IconsPlugin` in your project, you can also just
-import the required icons CSS, rather than the full Bootstrap and BootstrapVue SCSS/CSS.
-
-```js
-import { BootstrapVueIcons } from 'bootstrap-vue'
-import 'bootstrap-vue/dist/bootstrap-vue-icons.min.css'
-
-Vue.use(BootstrapVueIcons)
-```
-
-Or if using the icons SCSS source:
-
-```js
-import { BootstrapVueIcons } from 'bootstrap-vue'
-import 'bootstrap-vue/src/icons.scss'
-
-Vue.use(BootstrapVueIcons)
-```
-
-BootstrapVue icons SCSS/CSS does not depend on any Bootstrap SASS variables, mixins, functions or
-CSS classes (other than the Bootstrap `text-{variant}` text color utility classes, if using the
-`variant` prop). Please note that the icons CSS is _also_ included in the main BootstrapVue SCSS/CSS
-files. Animations effects require BootstrapVue custom SCSS/CSS.
-
-### Browser
-
-Icons are **not** installed by default in the UMD browser build, so you must explicitly include the
-icons library:
-
-```html
-<head>
-  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
-  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
-  <!-- Load Vue followed by BootstrapVue, and BootstrapVueIcons -->
-  <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
-  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
-  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
-</head>
-```
-
-If using just the icons:
-
-```html
-<head>
-  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
-  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.css" />
-  <!-- Load Vue followed by BootstrapVueIcons -->
-  <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
-  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
-</head>
-```
-
-### Icon components
-
-You can either uses individual icon components, or use the icon helper component `<b-icon>`, to
-place icons in your project templates.
-
-All individual icon components are prefixed with the name `<b-icon-{name}>`, where `{name}` is one
-of the icon names listed in the [Icons](#icons) section above.
-
-**Using individual icon components:**
-
-```html
-<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 -->
-```
-
-**Using the `<b-icon>` helper component:**
-
-```html
-<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 -->
-```
-
-**Note:** when using `<b-icon>`, you **must** also import the required individual icon components,
-unless you are using the `IconsPlugin` or `BootstrapVueIcons` plugin.
-
-## Variants
-
-By default, icons inherit the current text color of their parent element. All icon components
-provide a `variant` prop to apply one of the Bootstrap contextual text variant colors:
-
-```html
-<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 -->
-```
-
-You can also use custom CSS to set the icon color, either via direct `style` attribute, or via
-custom classes:
-
-```html
-<template>
-  <div class="h2 mb-0">
-    <b-icon icon="battery-full" style="color: #7952b3;"></b-icon>
-  </div>
-</template>
-
-<!-- icons-color-css.vue -->
-```
-
-The `variant` prop places the [color utility class](/docs/reference/color-variants) `text-{variant}`
-on the icon's root element.
-
-## Sizing
-
-Icons have a default width and height of `1em`, which means they will scale with the size of the
-current font size:
-
-```html
-<template>
-  <div>
-    <p class="h1 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
-    <p class="h2 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
-    <p class="h3 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
-    <p class="h4 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
-    <p class="h5 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
-  </div>
-</template>
-
-<!-- icons-size-inherit.vue -->
-```
-
-You can also use custom CSS to set the icon size, either via direct `style` attribute, or via custom
-classes:
-
-```html
-<template>
-  <div>
-    <b-icon icon="exclamation-circle" style="width: 120px; height: 120px;"></b-icon>
-  </div>
-</template>
-
-<!-- icons-size-css.vue -->
-```
-
-You can also use the prop `font-scale` to scale the icon's current font size by the specified
-factor:
-
-```html
-<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 -->
-```
-
-Also see the [scaling transforms](#scale) section below for additional sizing options.
-
-## Styling
-
-With the use of Bootstrap's border, background and padding
-[utility classes](/docs/reference/utility-classes), you can create various styling effects:
-
-```html
-<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 transforms
-
-BootstrapVue icons provide several props for applying basic SVG transforms to the `<svg>`. All
-transforms can be combined for added effect. Note that the transforms are applied to the `<svg>`
-_content_ and not the `<svg>` bounding box.
-
-### Flipping
-
-Flip the icon horizontally and/or vertically via the `flip-h` and `flip-v` props.
-
-```html
-<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
-
-Rotate the icon by a specified number of degrees via the `rotate` prop. Positive values will rotate
-the icon clockwise, while negative values will rotate the icon counterclockwise.
-
-```html
-<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 -->
-```
-
-Note that any [flipping](#flipping) is performed before the rotation is applied.
-
-### Scale
-
-Scale the icon by any positive factor via the `scale` prop. Note this changes the icon's visual size
-but not its physical font size. To illustrate this we have added a background color to the icons.
-
-```html
-<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 -->
-```
-
-If you need to have the background and/or border scale with the icon, use the `font-scale` prop
-instead.
-
-### Shifting
-
-Shifting affects icon location without changing or moving the svg container. To move icons on the
-horizontal and/or vertical axis, use the `shift-h` and `shift-v` props with any arbitrary numeric
-value, including decimals.
-
-For `shift-v`, positive values will move the icon upwards, while negative values will move the icon
-downwards. For `shift-h`, positive values will move the icon to the right, while negative values
-will move it left. Both props accept values that are in units of 1/16em (relative to the icon's
-current _font size_).
-
-For clarity in the example, we’ve added a background color on the icon so you can see the effect.
-
-```html
-<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 -->
-```
-
-Shifting is applied after any rotation transforms. As with scaling, backgrounds and borders are not
-affected. If you need to shift the border/background with the icon, use Bootstrap's margin
-[spacing utility classes](/docs/reference/utility-classes).
-
-## Animated icons
-
-<span class="badge badge-info small">v2.7.0+</span>
-
-BootstrapVue includes the following built-in animations for icons:
-
-- `'cylon'` slides the icon left-right
-- `'cylon-vertical'` slides the icon up-down
-- `'fade'` fades the icon in and out <span class="badge badge-info small">2.12.0+</span>
-- `'spin'` smoothly spins the icon clockwise
-- `'spin-reverse'` smoothly spins the icon counter-clockwise
-- `'spin-pulse'` spins the icon clockwise, but in a pulsed step style
-- `'spin-reverse-pulse'` spins the icon counter-clockwise, but in a pulsed step style
-- `'throb'` scales the icon in and out <span class="badge badge-info small">2.12.0+</span>
-
-To use the animation, set the `animation` prop to one of the animation names above.
-
-```html
-<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 -->
-```
-
-As the animations are CSS based, they are applied _after_ any SVG transforms have taken place:
-
-```html
-<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 -->
-```
-
-The BootstrapVue defined icon animation effects require BootstrapVue's custom CSS. The `animation`
-prop translates to the class name `b-icon-animation-{animationName}`.
-
-Need a different style animation? Just create a custom class defining the animation, and apply that
-class to the icon component, or create a new animation class in the form of
-`b-icon-animation-{animationName}` and pass the custom animation name to the `animation` prop.
-
-**Animation notes:**
-
-- With the `cylon` animations, the left-right movement (or up-down movement) extends _past_ the
-  icon's bounding box by `+/- 25%`, so you may need to adjust padding or margins to compensate for
-  your use case.
-- Animation durations can be [configured via SASS SCSS variables](/docs/reference/theming)
-- The BootstrapVue defined animation effects of this component is dependent on the
-  `prefers-reduced-motion` media query. See the
-  [reduced motion section of our accessibility documentation](/docs/reference/accessibility#reduced-motion)
-  for additional details.
-- The `cylon` animation gets its name from the "eye" of the Cylons from the _original_
-  [1978 Battlestar Galactica TV series](https://www.youtube.com/watch?v=5a5bEIf0UaU).
-
-## Stacking icons
-
-<span class="badge badge-info small">v2.3.0+</span>
-
-Combine icons together via the use of the component `<b-iconstack>` and the `stacked` prop on
-individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
-
-```html
-<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>` supports the same `variant`, `font-size`, `animation` and transformation props
-available on individual icons.
-
-Stacked icon notes:
-
-- Remember to set the `stacked` prop on the inner icon components!
-- The `font-scale` prop cannot be used on the inner icon components
-- The `width` and `height` attributes cannot be applied to the inner icon components
-- Stacked icons **cannot** be stacked inside another `<b-iconstack>`
-
-### Stacked icon animation
-
-The `<b-iconstack>` component supports the same animations as individual icons:
-
-```html
-<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 -->
-```
-
-Individual icons within the icon stack can also be animated (except on IE 11):
-
-```html
-<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 -->
-```
-
-**Notes:**
-
-- IE 11 does not support animation of child elements within an SVG, hence only the `<b-iconstack>`
-  component can be animated. The child icon(s) animation will not be visible to IE 11 users.
-- The BootstrapVue defined animation effects of this component is dependent on the
-  `prefers-reduced-motion` media query. See the
-  [reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
-  additional details.
-
-## Using in components
-
-Easily place icons as content in other components.
-
-Note that icons placed in BootstrapVue components use BootstrapVue's custom CSS for additional
-styling compensation due to current issues with Bootstrap Icons `<svg>` alignment implementation,
-and for additional aesthetic scaling (icons placed in the components listed below will have their
-font scaled by 125%).
-
-### Buttons
-
-```html
-<template>
-  <div>
-    <b-button size="sm" class="mb-2">
-      <b-icon icon="gear-fill" aria-hidden="true"></b-icon> Settings
-    </b-button>
-    <br>
-    <b-button variant="primary" class="mb-2">
-      Pay now <b-icon icon="credit-card" aria-hidden="true"></b-icon>
-    </b-button>
-    <br>
-    <b-button variant="outline-info" class="mb-2">
-      <b-icon icon="power" aria-hidden="true"></b-icon> Logout
-    </b-button>
-    <br>
-    <b-button size="lg" variant="primary" class="mb-2">
-      <b-icon icon="question-circle-fill" aria-label="Help"></b-icon>
-    </b-button>
-  </div>
-</template>
-
-<!-- icons-buttons.vue -->
-```
-
-### Button Groups and toolbars
-
-#### Button Group
-
-```html
-<template>
-  <div>
-    <b-button-group>
-      <b-button variant="outline-primary">
-        <b-icon icon="tools"></b-icon> Settings
-      </b-button>
-      <b-button variant="outline-primary">
-        <b-icon icon="person-fill"></b-icon> Account
-      </b-button>
-      <b-button variant="outline-primary">
-        <b-icon icon="inbox-fill"></b-icon> Messages
-      </b-button>
-    </b-button-group>
-  </div>
-</template>
-
-<!-- icons-button-group.vue -->
-```
-
-#### Button Toolbar
-
-```html
-<template>
-  <div>
-    <b-button-toolbar>
-      <b-button-group class="mr-1">
-        <b-button title="Save file">
-          <b-icon icon="cloud-upload" aria-hidden="true"></b-icon>
-        </b-button>
-        <b-button title="Load file">
-          <b-icon icon="cloud-download" aria-hidden="true"></b-icon>
-        </b-button>
-        <b-button title="New document">
-          <b-icon icon="file-earmark" aria-hidden="true"></b-icon>
-        </b-button>
-      </b-button-group>
-      <b-button-group class="mr-1">
-        <b-button title="Align left">
-          <b-icon icon="text-left" aria-hidden="true"></b-icon>
-        </b-button>
-        <b-button title="Align center">
-          <b-icon icon="text-center" aria-hidden="true"></b-icon>
-        </b-button>
-        <b-button title="Align right">
-          <b-icon icon="text-right" aria-hidden="true"></b-icon>
-        </b-button>
-      </b-button-group>
-      <b-button-group>
-        <b-button title="Bold">
-          <b-icon icon="type-bold" aria-hidden="true"></b-icon>
-        </b-button>
-        <b-button title="Italic">
-          <b-icon icon="type-italic" aria-hidden="true"></b-icon>
-        </b-button>
-        <b-button title="Underline">
-          <b-icon icon="type-underline" aria-hidden="true"></b-icon>
-        </b-button>
-        <b-button title="Strikethrough">
-          <b-icon icon="type-strikethrough" aria-hidden="true"></b-icon>
-        </b-button>
-      </b-button-group>
-    </b-button-toolbar>
-  </div>
-</template>
-
-<!-- icons-button-toolbar.vue -->
-```
-
-### Input Groups
-
-```html
-<template>
-  <div>
-    <b-input-group size="sm" class="mb-2">
-      <b-input-group-prepend is-text>
-        <b-icon icon="search"></b-icon>
-      </b-input-group-prepend>
-      <b-form-input type="search" placeholder="Search terms"></b-form-input>
-    </b-input-group>
-    <b-input-group class="mb-2">
-      <b-input-group-prepend is-text>
-        <b-icon icon="tag-fill"></b-icon>
-      </b-input-group-prepend>
-      <b-form-tags
-        separator=" ,;"
-        tag-variant="primary"
-        placeholder="Enter new tags separated by space, comma or semicolon"
-        no-add-on-enter
-      ></b-form-tags>
-    </b-input-group>
-    <b-input-group class="mb-2">
-      <b-input-group-prepend is-text>
-        <b-icon icon="person-fill"></b-icon>
-      </b-input-group-prepend>
-      <b-form-input type="text" placeholder="User ID"></b-form-input>
-    </b-input-group>
-    <b-input-group size="lg">
-      <b-input-group-prepend is-text>
-        <b-icon icon="envelope"></b-icon>
-      </b-input-group-prepend>
-      <b-form-input type="email" placeholder="me@example.com"></b-form-input>
-    </b-input-group>
-  </div>
-</template>
-
-<!-- icons-input-groups.vue -->
-```
-
-### List Groups
-
-```html
-<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 -->
-```
-
-### Dropdowns
-
-```html
-<template>
-  <div>
-    <b-dropdown variant="primary">
-      <template #button-content>
-        <b-icon icon="gear-fill" aria-hidden="true"></b-icon> Settings
-      </template>
-      <b-dropdown-item-button>
-         <b-icon icon="lock-fill" aria-hidden="true"></b-icon>
-         Locked <span class="sr-only">(Click to unlock)</span>
-      </b-dropdown-item-button>
-      <b-dropdown-divider></b-dropdown-divider>
-      <b-dropdown-group header="Choose options" class="small">
-        <b-dropdown-item-button>
-           <b-icon icon="blank" aria-hidden="true"></b-icon>
-           Option A <span class="sr-only">(Not selected)</span>
-        </b-dropdown-item-button>
-        <b-dropdown-item-button>
-           <b-icon icon="check" aria-hidden="true"></b-icon>
-           Option B <span class="sr-only">(Selected)</span>
-        </b-dropdown-item-button>
-         <b-dropdown-item-button>
-           <b-icon icon="blank" aria-hidden="true"></b-icon>
-           Option C <span class="sr-only">(Not selected)</span>
-        </b-dropdown-item-button>
-      </b-dropdown-group>
-      <b-dropdown-divider></b-dropdown-divider>
-      <b-dropdown-item-button>Some action</b-dropdown-item-button>
-      <b-dropdown-item-button>Some other action</b-dropdown-item-button>
-      <b-dropdown-divider></b-dropdown-divider>
-      <b-dropdown-item-button variant="danger">
-        <b-icon icon="trash-fill" aria-hidden="true"></b-icon>
-        Delete
-      </b-dropdown-item-button>
-    </b-dropdown>
-  </div>
-</template>
-
-<!-- icons-dropdowns.vue -->
-```
-
-## Working with SVGs
-
-SVGs are awesome to work with, but they do have some known quirks to work around.
-
-- **Focus handling is broken in Internet Explorer and Edge.** We have added the attribute
-  `focusable="false"` to the `<svg>` element. You can override this by setting the attribute
-  `focusable="false"` on the icon component.
-- **Browsers inconsistently announce SVGs as `<img>` tags with voice assistance.** Hence, we have
-  added added the attributes `role="img"` and `alt="icon"`. You can override these attributes if
-  needed.
-- **Safari skips `aria-label` when used on non-focusable SVGs.** As such, use the attribute
-  `aria-hidden="true"` when using the icon and use CSS to visually hide the equivalent label.
-
-## Icons
-
-Use the explorer below to search and browse the available icons.
-
-<!-- Component rendered by `docs/pages/docs/icons.index.js` -->
-<!-- We use a `<div is="...">` to prevent marked loader from mangling the unknown tag -->
-<div is="IconsTable"></div>