diff --git a/src/icons/helpers/icon-base.js b/src/icons/helpers/icon-base.js index 79d380dbb3a..bf0e02a71d0 100644 --- a/src/icons/helpers/icon-base.js +++ b/src/icons/helpers/icon-base.js @@ -116,6 +116,12 @@ export const BVIconBase = /*#__PURE__*/ Vue.extend({ ) } + if (isStacked) { + // Wrap in an additional `` for proper + // animation handling if stacked + $inner = h('g', {}, [$inner]) + } + return h( 'svg', mergeData( diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index 2b4c953aea8..2e5f28c9aaf 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -52,6 +52,38 @@ describe('icons', () => { expect(wrapper.find('svg > g > path').exists()).toBe(true) }) + it('b-icon has expected structure when `stacked` prop is true', async () => { + const wrapper = mount(BIcon, { + localVue: localVue, + parentComponent: parentComponent, + propsData: { + icon: 'alert-circle-fill', + stacked: true + } + }) + + expect(wrapper.exists()).toBe(true) + expect(wrapper.is('svg')).toBe(true) + expect(wrapper.classes()).toContain('b-icon') + expect(wrapper.classes()).toContain('bi') + expect(wrapper.classes()).toContain('bi-alert-circle-fill') + expect(wrapper.classes().length).toBe(3) + expect(wrapper.attributes('role')).not.toBe('img') + expect(wrapper.attributes('alt')).not.toBe('icon') + expect(wrapper.attributes('focusable')).toBe('false') + expect(wrapper.attributes('xmlns')).not.toBe('http://www.w3.org/2000/svg') + expect(wrapper.attributes('width')).not.toBe('1em') + expect(wrapper.attributes('height')).not.toBe('1em') + expect(wrapper.attributes('viewBox')).toBe('0 0 20 20') + expect(wrapper.attributes('fill')).toBe('currentColor') + expect(wrapper.attributes('style')).not.toBeDefined() + expect(wrapper.element.style.fontSize).toEqual('') + expect(wrapper.find('svg > g').exists()).toBe(true) + expect(wrapper.find('svg > g').attributes('transform')).not.toBeDefined() + expect(wrapper.find('svg > g > path').exists()).toBe(false) + expect(wrapper.find('svg > g > g > path').exists()).toBe(true) + }) + it('b-icon with empty icon name renders BIconBlank', async () => { // This test assumes Vue doesn't puke on unknown component names // As we don't specify a parent instance (which has all the registered