bootstrap-vue · jacobmllr95 · Jul 16, 2020 · Jul 15, 2020 · Jul 15, 2020 · Jul 16, 2020
diff --git a/README.md b/README.md
@@ -6,9 +6,10 @@
 <br>
 
 <p align="center">
-  BootstrapVue, with over 40 available plugins, more than 80 custom components, and over 670 icons,
-  provides one of the most comprehensive implementations of the Bootstrap v4 component and grid
-  system for Vue.js, complete with extensive and automated WAI-ARIA accessibility markup.
+  With more than 85 components, over 45 available plugins, several directives, and 1000+ icons,
+  BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4.5
+  component and grid system available for Vue.js v2.6, complete with extensive and automated
+  WAI-ARIA accessibility markup.
 </p>
 <br>
 

diff --git a/docs/components/icons-table.vue b/docs/components/icons-table.vue
@@ -42,18 +42,18 @@
       <transition-group
         tag="ul"
         name="flip-icon-list"
-        class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 list-unstyled mb-n3 position-relative"
+        class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 row-cols-xxl-10 list-unstyled"
       >
         <b-col
           v-for="icon in filteredIcons"
           :key="`_icon_${icon.name}`"
           tag="li"
-          class="flip-icon-list-icon d-inline-flex flex-column mb-3 text-center"
+          class="flip-icon-list-icon d-inline-flex flex-column mb-4 text-center"
         >
-          <div class="card bg-light p-3" :title="icon.name">
+          <b-card bg-variant="light" class="px-3 py-4 border-0" no-body>
             <b-icon :icon="icon.name" class="mx-auto"></b-icon>
-          </div>
-          <b-form-text class="mt-1 text-break" :title="icon.name">{{ icon.name }}</b-form-text>
+          </b-card>
+          <b-form-text class="mt-2 text-break" :title="icon.name">{{ icon.name }}</b-form-text>
         </b-col>
       </transition-group>
       <div aria-live="polite" aria-atomic="true">
@@ -121,6 +121,20 @@
 .flip-icon-list-leave-active {
   position: absolute;
 }
+
+@media (min-width: 1200px) {
+  .row-cols-xl-8 > * {
+    flex: 0 0 12.5%;
+    max-width: 12.5%;
+  }
+}
+
+@media (min-width: 1400px) {
+  .row-cols-xxl-10 > * {
+    flex: 0 0 10%;
+    max-width: 10%;
+  }
+}
 </style>
 
 <script>

diff --git a/docs/content/index.js b/docs/content/index.js
@@ -62,12 +62,36 @@ export const nav = [
   }
 ]
 
+// RegExp to grab the minor version from a full version
+const minorRE = /^(\d+\.\d+)(\..+)$/
+// RegExp to grab the major version from a full version
+const majorRE = /^(\d+)(\.\d+\..+)$/
+
 export const bootstrapVersion = parseVersion(dependencies.bootstrap)
+export const bootstrapVersionMinor = bootstrapVersion.replace(minorRE, '$1')
+export const bootstrapVersionMajor = bootstrapVersion.replace(majorRE, '$1')
+
 export const bootstrapIconsVersion = parseFullVersion(devDependencies['bootstrap-icons'])
+export const bootstrapIconsVersionMinor = bootstrapIconsVersion.replace(minorRE, '$1')
+export const bootstrapIconsVersionMajor = bootstrapIconsVersion.replace(majorRE, '$1')
+export const bootstrapIconsCount = 1000
+
 export const popperVersion = parseVersion(dependencies['popper.js'])
+export const popperVersionMinor = popperVersion.replace(minorRE, '$1')
+export const popperVersionMajor = popperVersion.replace(majorRE, '$1')
+
 export const portalVueVersion = parseVersion(dependencies['portal-vue'])
+export const portalVueVersionMinor = portalVueVersion.replace(minorRE, '$1')
+export const portalVueVersionMajor = portalVueVersion.replace(majorRE, '$1')
+
 export const nuxtVersion = parseVersion(devDependencies.nuxt)
+export const nuxtVersionMinor = nuxtVersion.replace(minorRE, '$1')
+export const nuxtVersionMajor = nuxtVersion.replace(majorRE, '$1')
+
 export const vueVersion = parseVersion(devDependencies.vue)
+export const vueVersionMinor = vueVersion.replace(minorRE, '$1')
+export const vueVersionMajor = vueVersion.replace(majorRE, '$1')
+
 export const defaultConfig = DEFAULT_CONFIG
 export const bvDescription = description
 

diff --git a/docs/pages/docs/icons/index.js b/docs/pages/docs/icons/index.js
@@ -7,7 +7,7 @@ import Main from '~/components/main'
 import QuickLinks from '~/components/quick-links'
 import Section from '~/components/section'
 import docsMixin from '~/plugins/docs-mixin'
-import { icons as iconsMeta, bootstrapIconsVersion } from '~/content'
+import { icons as iconsMeta, bootstrapIconsVersion, bootstrapIconsCount } from '~/content'
 import readmeData from '~/../src/icons/README.md'
 
 const { titleLead = '', body = '', baseTOC = {} } = readmeData
@@ -34,7 +34,8 @@ export default {
       baseTOC,
       // Key for icons meta is `''` (empty slug)
       meta: iconsMeta[''],
-      bootstrapIconsVersion
+      bootstrapIconsVersion,
+      bootstrapIconsCount
     }
   },
   computed: {

diff --git a/docs/pages/docs/index.js b/docs/pages/docs/index.js
@@ -4,24 +4,30 @@ import QuickLinks from '~/components/quick-links'
 import Section from '~/components/section'
 import docsMixin from '~/plugins/docs-mixin'
 import {
+  bootstrapIconsCount,
   bootstrapVersion,
+  bootstrapVersionMajor,
+  bootstrapVersionMinor,
   defaultConfig,
   nuxtVersion,
+  nuxtVersionMajor,
+  nuxtVersionMinor,
   popperVersion,
+  popperVersionMajor,
+  popperVersionMinor,
   portalVueVersion,
+  portalVueVersionMajor,
+  portalVueVersionMinor,
   version,
-  vueVersion
+  vueVersion,
+  vueVersionMajor,
+  vueVersionMinor
 } from '~/content'
 import meta from '~/markdown/intro/meta.json'
 import readmeData from '~/markdown/intro/README.md'
 
 const { titleLead = '', body = '', baseTOC = {} } = readmeData
 
-// RegExp to grab the minor version from a full version
-const minorRE = /^(\d+\.\d+)(\..+)$/
-// RegExp to grab the major version from a full version
-const majorRE = /^(\d+)(\.\d+\..+)$/
-
 // @vue/component
 export default {
   name: 'BDVDocs',
@@ -36,25 +42,26 @@ export default {
   data() {
     return {
       bootstrapVersion,
-      bootstrapVersionMinor: bootstrapVersion.replace(minorRE, '$1'),
-      bootstrapVersionMajor: bootstrapVersion.replace(majorRE, '$1'),
+      bootstrapVersionMinor,
+      bootstrapVersionMajor,
+      bootstrapIconsCount,
       defaultConfig,
       nuxtVersion,
-      nuxtVersionMinor: nuxtVersion.replace(minorRE, '$1'),
-      nuxtVersionMajor: nuxtVersion.replace(majorRE, '$1'),
+      nuxtVersionMinor,
+      nuxtVersionMajor,
       popperVersion,
-      popperVersionMinor: popperVersion.replace(minorRE, '$1'),
-      popperVersionMajor: popperVersion.replace(majorRE, '$1'),
+      popperVersionMinor,
+      popperVersionMajor,
       portalVueVersion,
-      portalVueVersionMinor: portalVueVersion.replace(minorRE, '$1'),
-      portalVueVersionMajor: portalVueVersion.replace(majorRE, '$1'),
+      portalVueVersionMinor,
+      portalVueVersionMajor,
       titleLead,
       body,
       baseTOC,
       version,
       vueVersion,
-      vueVersionMinor: vueVersion.replace(minorRE, '$1'),
-      vueVersionMajor: vueVersion.replace(majorRE, '$1')
+      vueVersionMinor,
+      vueVersionMajor
     }
   },
   computed: {

diff --git a/docs/pages/index.vue b/docs/pages/index.vue
@@ -82,10 +82,10 @@
             <b-row class="mb-4">
               <b-col lg="10" offset-lg="1">
                 <p class="text-lg-center">
-                  With more than 85 components, over 45 available plugins, several directives, and 670+ icons,
+                  With more than 85 components, over 45 available plugins, several directives, and {{ bootstrapIconsCount }}+ icons,
                   <span class="bd-text-purple-bright">BootstrapVue</span> provides one of the most
                   comprehensive implementations of the
-                  <span class="bd-text-purple-bright">Bootstrap v{{ bootstrapVersionMinor }}</span> component and grid system
+                  <span class="bd-text-purple-bright">Bootstrap v{{ bootstrapVersionMajor }}</span> component and grid system
                   available for <span class="bd-text-purple-bright">Vue.js v{{ vueVersionMinor }}</span>, complete with
                   extensive and automated
                   <b-link href="https://www.w3.org/WAI/standards-guidelines/aria/" target="_blank">
@@ -546,7 +546,13 @@ $bv-angle-padding-md: 6rem;
 </style>
 
 <script>
-import { version, bootstrapVersion, vueVersion } from '~/content'
+import {
+  bootstrapIconsCount,
+  bootstrapVersionMajor,
+  bootstrapVersionMinor,
+  version,
+  vueVersionMinor
+} from '~/content'
 import BvLogo from '~/components/bv-logo'
 import BVCarbonAd from '~/components/carbon-ad'
 import BVContributors from '~/components/contributors'
@@ -557,25 +563,12 @@ export default {
     BVCarbonAd,
     BVContributors
   },
-  data() {
-    return {
-      isIE: false,
-      showLogo: false
-    }
-  },
-  computed: {
-    version: () => version,
-    bootstrapVersionMinor: () => bootstrapVersion.replace(/\.\d+$/, ''),
-    vueVersionMinor: () => vueVersion.replace(/\.\d+$/, ''),
-    bootstrapUrl() {
-      return `https://getbootstrap.com/docs/${this.bootstrapVersionMinor}`
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.isIE = /msie|trident/i.test(window.navigator.userAgent || '')
-      this.showLogo = true
-    })
+  created() {
+    this.bootstrapUrl = `https://getbootstrap.com/docs/${bootstrapVersionMinor}`
+    this.bootstrapVersionMajor = bootstrapVersionMajor
+    this.bootstrapIconsCount = bootstrapIconsCount
+    this.vueVersionMinor = vueVersionMinor
+    this.version = version
   }
 }
 </script>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bootstrap-vue",
   "version": "2.15.0",
-  "description": "BootstrapVue, with more than 85 custom components, over 45 plugins, several custom directives, and over 670 icons, provides one of the most comprehensive implementations of Bootstrap v4 components and grid system for Vue.js. With extensive and automated WAI-ARIA accessibility markup.",
+  "description": "With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup.",
   "main": "dist/bootstrap-vue.common.js",
   "web": "dist/bootstrap-vue.js",
   "module": "esm/index.js",

diff --git a/src/icons/README.md b/src/icons/README.md
@@ -12,6 +12,7 @@ installed by default. You do not need `bootstrap-icons` as a dependency.
 - Icon components were added in BootstrapVue release `v2.2.0`.
 - Bootstrap Icons `v1.0.0-alpha3` icons were added in BootstrapVue release `v2.8.0`.
 - Bootstrap Icons `v1.0.0-alpha4` icons were added in BootstrapVue release `v2.15.0`.
+- Bootstrap Icons `v1.0.0-alpha5` icons were added in BootstrapVue release `v2.16.0`.
 
 <div class="alert alert-info small">
   <p class="mb-2">
@@ -32,20 +33,13 @@ installed by default. You do not need `bootstrap-icons` as a dependency.
       names &mdash; <code>arrow-up-down</code> renamed <code>arrow-down-up</code> and
       <code>people-circle</code> renamed <code>person-circle</code>.
     </li>
+    <li>
+      <strong>Alpha 5 changes:</strong> In addition to over 300 new icons, some icons have changed
+      names &mdash; <code>camera</code> renamed <code>camera2</code>.
+    </li>
   </ul>
 </div>
 
-## Icons
-
-The library includes over 670 icons. Use the explorer below to search and browse the available
-icons.
-
-<div>
-  <!-- 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>
-</div>
-
 ## Usage
 
 BootstrapVue icons are not automatically installed when using BootstrapVue in your project, you must
@@ -878,3 +872,12 @@ SVGs are awesome to work with, but they do have some known quirks to work around
   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
+
+The library includes over {{ bootstrapIconsCount }} 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>