buefy 3.0.4 → 3.0.6

package/dist/esm/table.js

@@ -1,18 +1,19 @@
-import { defineComponent, resolveComponent, createElementBlock, openBlock, createElementVNode, createBlock, withCtx, Fragment, renderList, createTextVNode, createCommentVNode, toDisplayString, withDirectives, vShow, createVNode, normalizeClass, renderSlot, h, toHandlerKey, camelize, toRaw, mergeProps, normalizeStyle, withKeys, withModifiers, Transition } from 'vue';
+import { defineComponent, resolveComponent, openBlock, createElementBlock, createElementVNode, createBlock, withCtx, Fragment, renderList, createTextVNode, toDisplayString, createCommentVNode, withDirectives, vShow, createVNode, normalizeClass, renderSlot, h, toHandlerKey, camelize, toRaw, mergeProps, normalizeStyle, withKeys, withModifiers, Transition } from 'vue';
 import { getValueByPath, toCssWidth, removeElement, translateTouchAsDragEvent, isFragment, escapeRegExpChars, removeDiacriticsFromString, indexOf, multiColumnSort, isNil, createAbsoluteElement } from './helpers.js';
-import { B as BPagination, d as debounce } from './Pagination-B-LAJQay.js';
-import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-C8LPuwDr.js';
-import { B as BCheckbox } from './Checkbox-KUMz0sfA.js';
-import { B as BIcon } from './Icon-DPyGDeRK.js';
-import { B as BInput } from './Input-C4L520az.js';
-import { B as BLoading } from './Loading-tuQoo6TU.js';
+import { B as BPagination, d as debounce } from './Pagination-DvgzxH87.js';
+import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-LfFRwwlz.js';
+import { B as BCheckbox } from './Checkbox-C6pO3IzG.js';
+import { B as BIcon } from './Icon-pQAdaqZb.js';
+import { B as BInput } from './Input-CErQ1Jyw.js';
+import { B as BLoading } from './Loading-BSqhV1Gi.js';
 import { B as BSlotComponent } from './SlotComponent-BwNpVnfH.js';
-import { B as BSelect } from './Select-bl4qUzij.js';
+import { B as BSelect } from './Select-CbkuxvSQ.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { a as registerComponent } from './plugins-1tLsuIZF.js';
-import './config-CKuo-p6e.js';
+import './config-f4Dyy8TN.js';
 import './CheckRadioMixin-DSD_rjC8.js';
-import './FormElementMixin-Dd_wkBN5.js';
+import './iconAliases-B-CydxNj.js';
+import './FormElementMixin-CKI7b4I4.js';
 import './ssr-C7yEpGLm.js';
 
 var _sfc_main$3 = defineComponent({

package/dist/esm/tabs.js

@@ -1,11 +1,12 @@
-import { defineComponent, resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, Fragment, renderList, withDirectives, createBlock, createCommentVNode, toDisplayString, vShow } from 'vue';
-import { B as BIcon } from './Icon-DPyGDeRK.js';
-import { c as config } from './config-CKuo-p6e.js';
-import { T as TabbedMixin, a as TabbedChildMixin } from './TabbedChildMixin-C4i6WP9j.js';
+import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, Fragment, renderList, withDirectives, createBlock, createCommentVNode, toDisplayString, vShow } from 'vue';
+import { B as BIcon } from './Icon-pQAdaqZb.js';
+import { c as config } from './config-f4Dyy8TN.js';
+import { T as TabbedMixin, a as TabbedChildMixin } from './TabbedChildMixin-Bdu5A4iY.js';
 import { B as BSlotComponent } from './SlotComponent-BwNpVnfH.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './helpers.js';
+import './iconAliases-B-CydxNj.js';
 import './InjectedChildMixin-D2K-FwuO.js';
 
 var _sfc_main$1 = defineComponent({

package/dist/esm/tag.js

@@ -1,10 +1,11 @@
-import { B as BTag } from './Tag-jS5Bcj6N.js';
-import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot } from 'vue';
+import { B as BTag } from './Tag-Dx_-Tavp.js';
+import { defineComponent, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { a as registerComponent } from './plugins-1tLsuIZF.js';
-import './Icon-DPyGDeRK.js';
-import './config-CKuo-p6e.js';
+import './Icon-pQAdaqZb.js';
+import './config-f4Dyy8TN.js';
 import './helpers.js';
+import './iconAliases-B-CydxNj.js';
 
 var _sfc_main = defineComponent({
   name: "BTaglist",

package/dist/esm/taginput.js

@@ -1,14 +1,15 @@
-import { defineComponent, resolveComponent, createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, normalizeClass, renderSlot, createBlock, Fragment, renderList, withCtx, createTextVNode, toDisplayString, createSlots } from 'vue';
+import { defineComponent, resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, renderSlot, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createSlots, createCommentVNode } from 'vue';
 import { getValueByPath } from './helpers.js';
-import { B as BTag } from './Tag-jS5Bcj6N.js';
-import { B as BAutocomplete } from './Autocomplete-CZ8DmXsB.js';
-import { c as config } from './config-CKuo-p6e.js';
-import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-C8LPuwDr.js';
-import { F as FormElementMixin } from './FormElementMixin-Dd_wkBN5.js';
+import { B as BTag } from './Tag-Dx_-Tavp.js';
+import { B as BAutocomplete } from './Autocomplete-BsBIH0Mj.js';
+import { c as config } from './config-f4Dyy8TN.js';
+import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-LfFRwwlz.js';
+import { F as FormElementMixin } from './FormElementMixin-CKI7b4I4.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { a as registerComponent } from './plugins-1tLsuIZF.js';
-import './Icon-DPyGDeRK.js';
-import './Input-C4L520az.js';
+import './Icon-pQAdaqZb.js';
+import './iconAliases-B-CydxNj.js';
+import './Input-CErQ1Jyw.js';
 
 var _sfc_main = defineComponent({
   name: "BTaginput",

package/dist/esm/timepicker.js

@@ -1,19 +1,20 @@
-import { T as Timepicker } from './Timepicker-DnkqnOBT.js';
+import { T as Timepicker } from './Timepicker-0ojuPkqd.js';
 import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import 'vue';
-import './TimepickerMixin-Bikh6_Fg.js';
-import './CompatFallthroughMixin-C8LPuwDr.js';
-import './config-CKuo-p6e.js';
-import './FormElementMixin-Dd_wkBN5.js';
+import './TimepickerMixin-oNahYGFZ.js';
+import './CompatFallthroughMixin-LfFRwwlz.js';
+import './config-f4Dyy8TN.js';
+import './FormElementMixin-CKI7b4I4.js';
 import './helpers.js';
-import './Dropdown-CGTYVyoL.js';
+import './Dropdown-GHauDDcD.js';
 import './trapFocus-KHP_kCNE.js';
 import './_plugin-vue_export-helper-OJRSZE6i.js';
-import './DropdownItem-Cn3nM0A3.js';
-import './Input-C4L520az.js';
-import './Icon-DPyGDeRK.js';
-import './Field-B7bX_uUg.js';
-import './Select-bl4qUzij.js';
+import './DropdownItem-By3tSZk2.js';
+import './Input-CErQ1Jyw.js';
+import './Icon-pQAdaqZb.js';
+import './iconAliases-B-CydxNj.js';
+import './Field-CU8ZBgMh.js';
+import './Select-CbkuxvSQ.js';
 
 const Plugin = {
   install(Vue) {

package/dist/esm/toast.js

@@ -1,6 +1,6 @@
-import { defineComponent, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, createElementBlock, Fragment, createCommentVNode, vShow, createApp, h, inject } from 'vue';
-import { c as config } from './config-CKuo-p6e.js';
-import { N as NoticeMixin } from './NoticeMixin-ByNlva3T.js';
+import { defineComponent, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, createElementBlock, Fragment, createCommentVNode, vShow, createApp, h, inject } from 'vue';
+import { c as config } from './config-f4Dyy8TN.js';
+import { N as NoticeMixin } from './NoticeMixin-TQEF1Kx6.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { getComponentFromVNode, copyAppContext } from './helpers.js';
 import { r as registerComponentProgrammatic } from './plugins-1tLsuIZF.js';

package/dist/esm/tooltip.js

@@ -1,7 +1,7 @@
-import { T as Tooltip } from './Tooltip-CtDSXAqa.js';
+import { T as Tooltip } from './Tooltip-BnzQFdnQ.js';
 import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import 'vue';
-import './config-CKuo-p6e.js';
+import './config-f4Dyy8TN.js';
 import './helpers.js';
 import './_plugin-vue_export-helper-OJRSZE6i.js';
 

package/dist/esm/upload.js

@@ -1,10 +1,10 @@
-import { defineComponent, createElementBlock, openBlock, mergeProps, renderSlot, createElementVNode, withModifiers, normalizeClass } from 'vue';
-import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-C8LPuwDr.js';
-import { F as FormElementMixin } from './FormElementMixin-Dd_wkBN5.js';
+import { defineComponent, openBlock, createElementBlock, mergeProps, renderSlot, withModifiers, normalizeClass, createElementVNode } from 'vue';
+import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-LfFRwwlz.js';
+import { F as FormElementMixin } from './FormElementMixin-CKI7b4I4.js';
 import { F as File } from './ssr-C7yEpGLm.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { a as registerComponent } from './plugins-1tLsuIZF.js';
-import './config-CKuo-p6e.js';
+import './config-f4Dyy8TN.js';
 
 const Upload$1 = defineComponent({
   name: "BUpload",

package/dist/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.52.8"
+      "packageVersion": "7.58.2"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buefy",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "Lightweight UI components for Vue.js (v3) based on Bulma",
   "keywords": [
     "vuejs",
@@ -68,7 +68,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@types/jsdom": "^21.1.7",
     "@vue/test-utils": "^2.4.6",

package/src/components/carousel/CarouselList.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="carousel-list"
+        class="carousel carousel-list"
         :class="{'has-shadow': scrollIndex > 0}"
         @mousedown.prevent="dragStart"
         @touchstart="dragStart"

package/src/components/carousel/__snapshots__/CarouselList.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BCarouselList > render correctly 1`] = `
-"<div class="carousel-list">
+"<div class="carousel carousel-list">
   <div class="carousel-slides" style="transform: translateX(0px);">
     <div class="carousel-slide is-active" style="width: 0px;">
       <b-image-stub src="https://picsum.photos/id/0/1230/500" lazy="true" responsive="true" srcsetformatter="[Function]" rounded="false" captionfirst="false" title="Slide 1" image="https://picsum.photos/id/0/1230/500"></b-image-stub>

package/src/components/checkbox/Checkbox.spec.ts

@@ -20,7 +20,9 @@ describe('BCheckbox', () => {
     })
 
     it('has an input checkbox', () => {
-        expect(wrapper.find('label input[type=checkbox]').exists()).toBeTruthy()
+        expect(
+            wrapper.find('label input[type=checkbox]').exists()
+        ).toBeTruthy()
     })
 
     it('emit input event with value when value change', async () => {
@@ -35,6 +37,68 @@ describe('BCheckbox', () => {
         (wrapper.vm.$refs.input as HTMLElement).focus = vi.fn()
         wrapper.vm.focus()
         await wrapper.vm.$nextTick()
-        expect((wrapper.vm.$refs.input as HTMLElement).focus).toHaveBeenCalled()
+        expect(
+            (wrapper.vm.$refs.input as HTMLElement).focus
+        ).toHaveBeenCalled()
+    })
+
+    it('renders no SVG when unchecked', () => {
+        const w = shallowMount(BCheckbox)
+        expect(w.find('.check svg').exists()).toBe(false)
+    })
+
+    it('renders inline SVG checkmark when checked (boolean modelValue)', async () => {
+        const w = shallowMount(BCheckbox, {
+            props: { modelValue: true }
+        })
+        const svg = w.find('.check svg')
+        expect(svg.exists()).toBe(true)
+        const path = svg.find('path')
+        expect(path.attributes('fill')).toBe('currentColor')
+        expect(path.attributes('d')).toBeTruthy()
+        // Uses the 1x1 normalized viewBox for the checkmark
+        expect(svg.attributes('viewBox')).toBe('0 0 1 1')
+    })
+
+    it('renders inline SVG checkmark when checked (array modelValue)', async () => {
+        const w = shallowMount(BCheckbox, {
+            props: { modelValue: ['a', 'b'], nativeValue: 'a' }
+        })
+        expect(w.find('.check svg').exists()).toBe(true)
+    })
+
+    it('renders no SVG when value not in array', () => {
+        const w = shallowMount(BCheckbox, {
+            props: { modelValue: ['b'], nativeValue: 'a' }
+        })
+        expect(w.find('.check svg').exists()).toBe(false)
+    })
+
+    it('renders indeterminate SVG path when indeterminate prop is true', () => {
+        const w = shallowMount(BCheckbox, {
+            props: { indeterminate: true }
+        })
+        const svg = w.find('.check svg')
+        expect(svg.exists()).toBe(true)
+        // Indeterminate and checkmark paths are different
+        const indeterminatePath = w.vm.checkmarkAlias.path
+        expect(indeterminatePath).toContain('0.15') // rect-as-path signature
+    })
+
+    it('checkmark uses different path for indeterminate vs checked', () => {
+        const checked = shallowMount(BCheckbox, { props: { modelValue: true } })
+        const indeterminate = shallowMount(BCheckbox, { props: { indeterminate: true } })
+        expect(checked.vm.checkmarkAlias.path).not.toBe(indeterminate.vm.checkmarkAlias.path)
+    })
+
+    it('SVG color is controlled via currentColor (not embedded in SVG data)', () => {
+        // Regression: previously _checkbox.scss embedded SVG colors as data-URIs;
+        // color could not be changed at runtime. Now SVG uses fill="currentColor"
+        // so the CSS `color` property on the parent drives the icon color.
+        const w = shallowMount(BCheckbox, { props: { modelValue: true } })
+        const path = w.find('.check svg path')
+        expect(path.attributes('fill')).toBe('currentColor')
+        // No inline fill color embedded in the path data
+        expect(path.attributes('d')).not.toContain('fill:')
     })
 })

package/src/components/checkbox/Checkbox.vue

@@ -27,7 +27,16 @@
             :false-value="falseValue"
             :aria-labelledby="ariaLabelledby"
         >
-        <span class="check" :class="type" />
+        <span class="check" :class="type">
+            <svg
+                v-if="isChecked || indeterminate"
+                :viewBox="checkmarkAlias.viewBox || '0 0 1 1'"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+            >
+                <path fill="currentColor" :d="checkmarkAlias.path" />
+            </svg>
+        </span>
         <span :id="ariaLabelledby" class="control-label"><slot /></span>
     </label>
 </template>
@@ -35,6 +44,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import CheckRadioMixin from '../../utils/CheckRadioMixin'
+import { resolveAlias } from '../../utils/iconAliases'
+import type { SvgIconAlias } from '../../utils/config'
 
 export default defineComponent({
     name: 'BCheckbox',
@@ -58,6 +69,19 @@ export default defineComponent({
             type: String,
             default: ''
         }
+    },
+    computed: {
+        isChecked(): boolean {
+            const val = this.computedValue
+            if (Array.isArray(val)) {
+                return val.includes(this.nativeValue)
+            }
+            return val === this.trueValue
+        },
+        checkmarkAlias(): SvgIconAlias {
+            const key = this.indeterminate ? 'checkboxIndeterminate' : 'checkboxOn'
+            return resolveAlias(key) as SvgIconAlias
+        }
     }
 })
 </script>

package/src/components/checkbox/__snapshots__/Checkbox.spec.ts.snap

@@ -4,6 +4,6 @@ exports[`BCheckbox > render correctly 1`] = `
 "<label class="b-checkbox checkbox">
   <!-- Checkbox needs to listen for a space event instead of a just a
              click and enter event so that that using the keyboard spacebar will also
-             trigger the checkbox change in the b-table --><input id="" type="checkbox" autocomplete="on" true-value="true" false-value="false" value="false"><span class="check"></span><span class="control-label"></span>
+             trigger the checkbox change in the b-table --><input id="" type="checkbox" autocomplete="on" true-value="true" false-value="false" value="false"><span class="check"><!--v-if--></span><span class="control-label"></span>
 </label>"
 `;

package/src/components/datepicker/__snapshots__/Datepicker.spec.ts.snap

@@ -16,9 +16,9 @@ exports[`BDatepicker > render correctly 1`] = `
             <div>
               <header class="datepicker-header">
                 <div class="pagination field is-centered"><a class="pagination-previous" role="button" href="#">
-                    <b-icon-stub icon="chevron-left" type="is-primary is-clickable" both="true"></b-icon-stub>
+                    <b-icon-stub type="is-primary is-clickable" icon="chevron-left" both="true"></b-icon-stub>
                   </a><a class="pagination-next" role="button" href="#">
-                    <b-icon-stub icon="chevron-right" type="is-primary is-clickable" both="true"></b-icon-stub>
+                    <b-icon-stub type="is-primary is-clickable" icon="chevron-right" both="true"></b-icon-stub>
                   </a>
                   <div class="pagination-list">
                     <div class="field">

package/src/components/dropdown/Dropdown.spec.ts

@@ -226,4 +226,19 @@ describe('BDropdown', () => {
         expect(document.removeEventListener).toBeCalledWith('click', expect.any(Function))
         expect(document.removeEventListener).toBeCalledWith('keyup', expect.any(Function))
     })
+
+    it('removes is-clipped-touch on unmount while dropdown is open', async () => {
+        // Simulate dropdown open in mobile-modal mode (mobileModal defaults to
+        // true) so the isActive watcher calls handleScroll(), which adds
+        // is-clipped-touch to the html element.  Then destroy the component
+        // (e.g. route navigation) without closing it first.  The class must be
+        // removed so that scrolling is not permanently locked.
+        await wrapper.setData({ isActive: true })
+        // The isActive watcher triggers handleScroll() which adds the class.
+        expect(document.documentElement.classList.contains('is-clipped-touch')).toBe(true)
+
+        wrapper.unmount()
+
+        expect(document.documentElement.classList.contains('is-clipped-touch')).toBe(false)
+    })
 })

package/src/components/dropdown/Dropdown.vue

@@ -480,6 +480,11 @@ export default defineComponent({
         if (typeof window !== 'undefined') {
             document.removeEventListener('click', this.clickedOutside)
             document.removeEventListener('keyup', this.keyPress)
+            // Clean up scroll lock in case the component is destroyed while the
+            // dropdown is open (e.g., route navigation in a SPA). Without this,
+            // is-clipped-touch persists on the html element and permanently
+            // prevents scrolling on desktop browsers at mobile viewport widths.
+            document.documentElement.classList.remove('is-clipped-touch')
         }
         if (this.appendToBody) {
             removeElement(this.$data._bodyEl!)

package/src/components/icon/Icon.spec.ts

@@ -1,6 +1,8 @@
 import { shallowMount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import BIcon from '@components/icon/Icon.vue'
+import type { ComponentIconAlias } from '@utils/config'
+import config from '@utils/config'
 
 describe('BIcon', () => {
     it('render correctly', () => {
@@ -139,4 +141,69 @@ describe('BIcon', () => {
 
         expect(wrapper.find('i').classes()).toContain('foo-bar')
     })
+
+    it('renders inline SVG when alias resolves to a SvgIconAlias', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: { alias: 'chevronLeft' }
+        })
+
+        const svg = wrapper.find('svg')
+        expect(svg.exists()).toBe(true)
+        expect(svg.attributes('aria-hidden')).toBe('true')
+        const path = svg.find('path')
+        expect(path.exists()).toBe(true)
+        expect(path.attributes('fill')).toBe('currentColor')
+        expect(path.attributes('d')).toBeTruthy()
+    })
+
+    it('renders viewBox from the alias on the SVG element', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: { alias: 'checkboxOn' }
+        })
+
+        expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 1 1')
+    })
+
+    it('falls back to 0 0 24 24 viewBox when alias has none', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: { alias: 'chevronLeft' }
+        })
+
+        expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 24 24')
+    })
+
+    it('renders a component alias (ComponentIconAlias)', () => {
+        const FakeIcon = { name: 'FakeIcon', template: '<span />' }
+        const alias: ComponentIconAlias = {
+            type: 'component',
+            component: FakeIcon,
+            icon: ['fas', 'check']
+        }
+
+        const original = config.iconAliases
+        config.iconAliases = { customAlias: alias }
+
+        const wrapper = shallowMount(BIcon, {
+            props: { alias: 'customAlias' }
+        })
+
+        const fakeIcon = wrapper.findComponent(FakeIcon)
+        expect(fakeIcon.exists()).toBe(true)
+
+        config.iconAliases = original
+    })
+
+    it('alias prop takes precedence over icon/pack when both are provided', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: {
+                alias: 'chevronLeft',
+                icon: 'eye',
+                pack: 'mdi'
+            }
+        })
+
+        // Should render SVG (from alias), not <i> (from pack)
+        expect(wrapper.find('svg').exists()).toBe(true)
+        expect(wrapper.find('i').exists()).toBe(false)
+    })
 })

package/src/components/icon/Icon.vue

@@ -1,10 +1,24 @@
 <template>
     <span class="icon" :class="[newType, size]">
+        <svg
+            v-if="isSvgAlias"
+            :viewBox="resolvedAliasSvg.viewBox || '0 0 24 24'"
+            xmlns="http://www.w3.org/2000/svg"
+            :class="customClass"
+            aria-hidden="true"
+        >
+            <path fill="currentColor" :d="resolvedAliasSvg.path" />
+        </svg>
+        <component
+            v-else-if="isComponentAlias"
+            :is="resolvedAliasComponent.component"
+            :icon="resolvedAliasComponent.icon"
+            :class="customClass"
+        />
         <i
-            v-if="!useIconComponent"
+            v-else-if="!useIconComponent"
             :class="[newPack, newIcon, newCustomSize, customClass]"
         />
-
         <component
             v-else
             :is="useIconComponent"
@@ -18,8 +32,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import config from '../../utils/config'
+import config, { type SvgIconAlias, type ComponentIconAlias } from '../../utils/config'
 import getIcons, { type InternalIconPack } from '../../utils/icons'
+import { resolveAlias } from '../../utils/iconAliases'
 
 export default defineComponent({
     name: 'BIcon',
@@ -29,14 +44,34 @@ export default defineComponent({
         pack: String,
         icon: {
             type: String,
-            required: true
+            required: false,
+            default: undefined
         },
+        /** Key into IconAliases (e.g. "chevronLeft"). Takes precedence over icon/pack. */
+        alias: String,
         size: String,
         customSize: String,
         customClass: String,
         both: Boolean // This is used internally to show both MDI and FA icon
     },
     computed: {
+        resolvedAlias() {
+            if (!this.alias) return null
+            return resolveAlias(this.alias) ?? null
+        },
+        isSvgAlias(): boolean {
+            return this.resolvedAlias?.type === 'svg'
+        },
+        isComponentAlias(): boolean {
+            return this.resolvedAlias?.type === 'component'
+        },
+        // Typed accessors used in the template
+        resolvedAliasSvg(): SvgIconAlias {
+            return this.resolvedAlias as SvgIconAlias
+        },
+        resolvedAliasComponent(): ComponentIconAlias {
+            return this.resolvedAlias as ComponentIconAlias
+        },
         iconConfig() {
             const allIcons = getIcons()
             return allIcons[this.newPack]
@@ -53,7 +88,7 @@ export default defineComponent({
         * internal icons are always MDI.
         */
         newIcon() {
-            return `${this.iconPrefix}${this.getEquivalentIconOf(this.icon)}`
+            return `${this.iconPrefix}${this.getEquivalentIconOf(this.icon ?? '')}`
         },
         newPack() {
             return this.pack || config.defaultIconPack

package/src/components/icon/__snapshots__/Icon.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BIcon > render correctly 1`] = `"<span class="icon"><i class="mdi mdi-undefined mdi-24px"></i></span>"`;
+exports[`BIcon > render correctly 1`] = `"<span class="icon"><i class="mdi mdi- mdi-24px"></i></span>"`;

package/src/components/icon/index.ts

@@ -15,3 +15,13 @@ export default Plugin
 export {
     Icon as BIcon
 }
+
+export type {
+    IconAlias,
+    SvgIconAlias,
+    ComponentIconAlias,
+    CssIconAlias,
+    IconAliases
+} from '../../utils/config'
+
+export { resolveAlias, getIconAliases } from '../../utils/iconAliases'

package/src/components/table/__snapshots__/TableMobileSort.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`BTableMobileSort > render correctly 1`] = `
   <div class="field has-addons">
     <b-select-stub modelvalue="-1" multiple="false" expanded=""></b-select-stub>
     <div class="control"><button class="button is-primary">
-        <b-icon-stub icon="arrow-up" size="is-small" both="true" class="is-desc"></b-icon-stub>
+        <b-icon-stub size="is-small" icon="arrow-up" both="true" class="is-desc"></b-icon-stub>
       </button></div>
   </div>
 </div>"