@fiscozen/icons 0.1.38 → 1.0.0

package/dist/src/FzIconBackground.vue.d.ts

@@ -0,0 +1,33 @@
+import { IconBackgroundProps } from './types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IconBackgroundProps>, {
+    size: string;
+    variant: string;
+    backgroundColor: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IconBackgroundProps>, {
+    size: string;
+    variant: string;
+    backgroundColor: string;
+}>>> & Readonly<{}>, {
+    size: import('./types').IconSize;
+    variant: import('./types').IconVariant;
+    backgroundColor: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/src/__tests__/FzIconBackground.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/index.d.ts

@@ -1,6 +1,7 @@
 import { Plugin } from 'vue';
 import { default as FzIcon } from './FzIcon.vue';
+import { default as FzIconBackground } from './FzIconBackground.vue';
 
 declare const IconPlugin: Plugin;
-export { FzIcon, IconPlugin };
-export type { IconVariant, IconSize, IconProps } from './types';
+export { FzIcon, FzIconBackground, IconPlugin };
+export type { IconVariant, IconSize, IconProps, IconBackgroundProps } from './types';

package/dist/src/types.d.ts

@@ -6,4 +6,7 @@ interface IconProps {
     variant?: IconVariant;
     spin?: boolean;
 }
-export type { IconVariant, IconSize, IconProps };
+interface IconBackgroundProps extends IconProps {
+    backgroundColor?: string;
+}
+export type { IconVariant, IconSize, IconProps, IconBackgroundProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/icons",
-  "version": "0.1.38",
+  "version": "1.0.0",
   "description": "Design system icon plugin and component",
   "main": "src/index.ts",
   "type": "module",
@@ -27,8 +27,8 @@
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "dependencies": {
     "@awesome.me/kit-8137893ad3": "^1.0.401",

package/src/FzIcon.vue

@@ -1,12 +1,23 @@
 <script setup lang="ts">
+/**
+ * FzIcon – Design system icon component (Font Awesome).
+ *
+ * Renders a single icon with configurable size and variant. The root element is a
+ * <span role="presentation"> so that v-color can be applied (e.g. <FzIcon v-color:blue="500" />)
+ * and the icon can be nested inside <p> or <span> without invalid HTML. role="presentation"
+ * removes semantics for accessibility.
+ *
+ * @component
+ * @example
+ * <FzIcon name="check" />
+ * <p v-color:blue>Ciao <FzIcon name="check" v-color:yellow /></p>
+ */
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { byPrefixAndName } from '@awesome.me/kit-8137893ad3/icons'
 import type { IconProps, IconSize } from './types'
 
-withDefaults(
-  defineProps<IconProps>(),
-  { size: 'lg', variant: 'far' }
-)
+withDefaults(defineProps<IconProps>(), { size: 'lg', variant: 'far' })
+
 const staticContainerClasses = ['flex', 'items-center', 'justify-center']
 const containerClassSizeMap: Record<IconSize, string> = {
   xs: 'size-[12.5px]',
@@ -27,12 +38,12 @@ const iconClassSizeMap: Record<IconSize, string> = {
 </script>
 
 <template>
-  <div :class="[staticContainerClasses, containerClassSizeMap[size]]">
-    <font-awesome-icon
+  <span role="presentation" :class="[staticContainerClasses, containerClassSizeMap[size]]">
+    <FontAwesomeIcon
       :class="iconClassSizeMap[size]"
       :icon="typeof name === 'string' ? byPrefixAndName[variant][name] : name"
       :size="size !== 'md' ? size : undefined"
       :spin="spin"
     />
-  </div>
+  </span>
 </template>

package/src/FzIconBackground.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { IconBackgroundProps } from './types'
+import FzIcon from './FzIcon.vue'
+
+const props = withDefaults(defineProps<IconBackgroundProps>(), {
+  size: 'lg',
+  variant: 'far',
+  backgroundColor: 'core-white'
+})
+
+const iconClasses = computed(() => {
+  return ['box-content', 'p-8', 'rounded-full', `bg-${props.backgroundColor}`]
+})
+
+/** Props passed to FzIcon; excludes backgroundColor to avoid fallthrough to DOM. */
+const iconProps = computed(() => {
+  const { backgroundColor: _bg, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <FzIcon :class="iconClasses" v-bind="iconProps" />
+</template>

package/src/__tests__/FzIcon.spec.ts

@@ -46,7 +46,7 @@ describe('FzIcon', () => {
         }
       })
       expect(wrapper.exists()).toBe(true)
-      expect(wrapper.find('div').exists()).toBe(true)
+      expect(wrapper.find('span').exists()).toBe(true)
     })
 
     it('should render with name prop', () => {
@@ -76,7 +76,7 @@ describe('FzIcon', () => {
           }
         }
       })
-      const container = wrapper.find('div')
+      const container = wrapper.find('span')
       expect(container.classes()).toContain('w-[25px]')
       expect(container.classes()).toContain('h-[25px]')
     })
@@ -95,7 +95,7 @@ describe('FzIcon', () => {
           }
         }
       })
-      const container = wrapper.find('div')
+      const container = wrapper.find('span')
       expect(container.classes()).toContain('custom-class')
     })
   })
@@ -154,7 +154,7 @@ describe('FzIcon', () => {
             }
           }
         })
-        const container = wrapper.find('div')
+        const container = wrapper.find('span')
         expect(container.classes()).toContain(containerClass)
         
         // Verify icon class is passed via :class binding to FontAwesome component
@@ -178,7 +178,7 @@ describe('FzIcon', () => {
             }
           }
         })
-        const container = wrapper.find('div')
+        const container = wrapper.find('span')
         expect(container.classes()).toContain('w-[25px]')
         expect(container.classes()).toContain('h-[25px]')
       })
@@ -274,7 +274,7 @@ describe('FzIcon', () => {
           }
         }
       })
-      const container = wrapper.find('div')
+      const container = wrapper.find('span')
       expect(container.classes()).toContain('flex')
       expect(container.classes()).toContain('items-center')
       expect(container.classes()).toContain('justify-center')
@@ -292,7 +292,7 @@ describe('FzIcon', () => {
           }
         }
       })
-      const container = wrapper.find('div')
+      const container = wrapper.find('span')
       expect(container.classes()).toContain('w-[20px]')
       expect(container.classes()).toContain('h-[20px]')
     })
@@ -355,7 +355,7 @@ describe('FzIcon', () => {
             }
           }
         })
-        const container = wrapper.find('div')
+        const container = wrapper.find('span')
         expect(container.attributes('aria-label')).toBe('Notification bell')
       })
 
@@ -374,7 +374,7 @@ describe('FzIcon', () => {
             }
           }
         })
-        const container = wrapper.find('div')
+        const container = wrapper.find('span')
         expect(container.attributes('role')).toBe('img')
       })
     })
@@ -391,8 +391,9 @@ describe('FzIcon', () => {
             }
           }
         })
-        // Decorative icons should not have aria-label
-        const container = wrapper.find('div')
+        // Decorative: root has role="presentation", no aria-label
+        const container = wrapper.find('span')
+        expect(container.attributes('role')).toBe('presentation')
         expect(container.attributes('aria-label')).toBeUndefined()
       })
     })

package/src/__tests__/FzIconBackground.spec.ts

@@ -0,0 +1,380 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FzIconBackground from '../FzIconBackground.vue'
+
+vi.mock('@awesome.me/kit-8137893ad3/icons', () => ({
+  byPrefixAndName: {
+    fas: { bell: ['fas', 'bell'], 'user-circle': ['fas', 'user-circle'] },
+    far: { bell: ['far', 'bell'], 'user-circle': ['far', 'user-circle'] },
+    fal: { bell: ['fal', 'bell'] },
+    fat: { bell: ['fat', 'bell'] },
+    fad: { bell: ['fad', 'bell'] },
+    fass: { bell: ['fass', 'bell'] },
+    fasr: { bell: ['fasr', 'bell'] },
+    fasl: { bell: ['fasl', 'bell'] },
+    fast: { bell: ['fast', 'bell'] },
+    fak: { bell: ['fak', 'bell'] }
+  }
+}))
+
+const mockFontAwesomeIcon = {
+  name: 'FontAwesomeIcon',
+  template: '<svg :class="$attrs.class" data-testid="fa-icon" />',
+  props: ['icon', 'size', 'spin']
+}
+
+describe('FzIconBackground', () => {
+  beforeEach(() => {
+    vi.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  const mountOptions = {
+    global: {
+      stubs: {
+        'font-awesome-icon': mockFontAwesomeIcon
+      }
+    }
+  }
+
+  // ============================================
+  // RENDERING TESTS
+  // ============================================
+  describe('Rendering', () => {
+    it('should render with default props', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell' },
+        ...mountOptions
+      })
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.find('span').exists()).toBe(true)
+    })
+
+    it('should render with name prop', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell' },
+        ...mountOptions
+      })
+      const icon = wrapper.find('svg')
+      expect(icon.exists()).toBe(true)
+    })
+
+    it('should render correct container size', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell', size: 'lg' },
+        ...mountOptions
+      })
+      const container = wrapper.find('span')
+      expect(container.classes()).toContain('w-[25px]')
+      expect(container.classes()).toContain('h-[25px]')
+    })
+
+    it('should apply custom class when provided', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell' },
+        attrs: { class: 'custom-class' },
+        ...mountOptions
+      })
+      const container = wrapper.find('span')
+      expect(container.classes()).toContain('custom-class')
+    })
+  })
+
+  // ============================================
+  // PROPS TESTS
+  // ============================================
+  describe('Props', () => {
+    describe('name prop', () => {
+      it('should accept string name', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell' },
+          ...mountOptions
+        })
+        expect(wrapper.props('name')).toBe('bell')
+      })
+
+      it('should accept array name', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: ['fas', 'bell'] },
+          ...mountOptions
+        })
+        expect(wrapper.props('name')).toEqual(['fas', 'bell'])
+      })
+    })
+
+    describe('size prop', () => {
+      it.each([
+        ['xs', 'size-[12.5px]', 'h-[10px]'],
+        ['sm', 'w-[15px]', 'h-[12px]'],
+        ['md', 'w-[20px]', 'h-[16px]'],
+        ['lg', 'w-[25px]', 'h-[20px]'],
+        ['xl', 'w-[32px]', 'h-[24px]'],
+        ['2xl', 'w-[40px]', 'h-[32px]']
+      ])('should apply correct classes for %s size', (size, containerClass, iconClass) => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell', size: size as 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' },
+          ...mountOptions
+        })
+        const container = wrapper.find('span')
+        expect(container.classes()).toContain(containerClass)
+        const iconElement = wrapper.find('[data-testid="fa-icon"]')
+        const classAttr = iconElement.attributes('class') || ''
+        expect(classAttr.includes(iconClass) || iconElement.classes().includes(iconClass)).toBe(true)
+      })
+
+      it('should default to lg size', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell' },
+          ...mountOptions
+        })
+        const container = wrapper.find('span')
+        expect(container.classes()).toContain('w-[25px]')
+        expect(container.classes()).toContain('h-[25px]')
+      })
+    })
+
+    describe('variant prop', () => {
+      it('should default to far variant', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell' },
+          ...mountOptions
+        })
+        expect(wrapper.props('variant')).toBe('far')
+      })
+
+      it.each([['fas'], ['far'], ['fal'], ['fat'], ['fad']])(
+        'should accept %s variant',
+        (variant) => {
+          const wrapper = mount(FzIconBackground, {
+            props: { name: 'bell', variant: variant as 'fas' | 'far' | 'fal' | 'fat' | 'fad' },
+            ...mountOptions
+          })
+          expect(wrapper.props('variant')).toBe(variant)
+        }
+      )
+    })
+
+    describe('spin prop', () => {
+      it('should not spin by default', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell' },
+          ...mountOptions
+        })
+        const spinProp = wrapper.props('spin')
+        expect(spinProp === undefined || spinProp === false).toBe(true)
+      })
+
+      it('should apply spin when true', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell', spin: true },
+          ...mountOptions
+        })
+        expect(wrapper.props('spin')).toBe(true)
+        const fontAwesomeComponent = wrapper.findComponent({ name: 'FontAwesomeIcon' })
+        expect(fontAwesomeComponent.exists()).toBe(true)
+        expect(fontAwesomeComponent.props('spin')).toBe(true)
+      })
+    })
+
+    describe('backgroundColor prop', () => {
+      it('should default to core-white', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell' },
+          ...mountOptions
+        })
+        expect(wrapper.props('backgroundColor')).toBe('core-white')
+      })
+
+      it('should apply background class from backgroundColor', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell', backgroundColor: 'grey-100' },
+          ...mountOptions
+        })
+        const container = wrapper.find('span')
+        expect(container.classes()).toContain('bg-grey-100')
+      })
+
+      it('should apply box-content, padding and rounded-full', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell' },
+          ...mountOptions
+        })
+        const container = wrapper.find('span')
+        expect(container.classes()).toContain('box-content')
+        expect(container.classes()).toContain('p-8')
+        expect(container.classes()).toContain('rounded-full')
+      })
+    })
+  })
+
+  // ============================================
+  // CSS CLASSES TESTS
+  // ============================================
+  describe('CSS Classes', () => {
+    it('should apply static base classes from FzIcon', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell' },
+        ...mountOptions
+      })
+      const container = wrapper.find('span')
+      expect(container.classes()).toContain('flex')
+      expect(container.classes()).toContain('items-center')
+      expect(container.classes()).toContain('justify-center')
+    })
+
+    it('should apply background wrapper classes', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell' },
+        ...mountOptions
+      })
+      const container = wrapper.find('span')
+      expect(container.classes()).toContain('box-content')
+      expect(container.classes()).toContain('p-8')
+      expect(container.classes()).toContain('rounded-full')
+      expect(container.classes()).toContain('bg-core-white')
+    })
+
+    it('should apply size-specific container classes', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell', size: 'md' },
+        ...mountOptions
+      })
+      const container = wrapper.find('span')
+      expect(container.classes()).toContain('w-[20px]')
+      expect(container.classes()).toContain('h-[20px]')
+    })
+
+    it('should apply size-specific icon classes', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell', size: 'xl' },
+        ...mountOptions
+      })
+      const fontAwesomeComponent = wrapper.findComponent({ name: 'FontAwesomeIcon' })
+      expect(fontAwesomeComponent.exists()).toBe(true)
+      const icon = wrapper.find('[data-testid="fa-icon"]')
+      const classAttr = icon.attributes('class') || ''
+      expect(classAttr.includes('h-[24px]') || icon.classes().includes('h-[24px]')).toBe(true)
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe('Accessibility', () => {
+    describe('ARIA attributes', () => {
+      it('should have icon rendered for decorative use', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell' },
+          ...mountOptions
+        })
+        const icon = wrapper.find('svg')
+        expect(icon.exists()).toBe(true)
+      })
+
+      it('should support aria-label when provided', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell' },
+          attrs: { 'aria-label': 'Notification bell' },
+          ...mountOptions
+        })
+        const container = wrapper.find('span')
+        expect(container.attributes('aria-label')).toBe('Notification bell')
+      })
+
+      it('should support role="img" when accessible', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell' },
+          attrs: { role: 'img', 'aria-label': 'Notification bell' },
+          ...mountOptions
+        })
+        const container = wrapper.find('span')
+        expect(container.attributes('role')).toBe('img')
+      })
+    })
+
+    describe('Decorative elements', () => {
+      it('should render icon without accessibility attributes when decorative', () => {
+        const wrapper = mount(FzIconBackground, {
+          props: { name: 'bell' },
+          ...mountOptions
+        })
+        const container = wrapper.find('span')
+        expect(container.attributes('role')).toBe('presentation')
+        expect(container.attributes('aria-label')).toBeUndefined()
+      })
+    })
+  })
+
+  // ============================================
+  // EDGE CASES
+  // ============================================
+  describe('Edge Cases', () => {
+    it('should handle different icon name formats', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'user-circle' },
+        ...mountOptions
+      })
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should handle array icon format', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: ['fas', 'bell'] },
+        ...mountOptions
+      })
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  // ============================================
+  // SNAPSHOTS
+  // ============================================
+  describe('Snapshots', () => {
+    it('should match snapshot - default state', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell' },
+        ...mountOptions
+      })
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should match snapshot - small size', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell', size: 'sm' },
+        ...mountOptions
+      })
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should match snapshot - large size', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell', size: 'xl' },
+        ...mountOptions
+      })
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should match snapshot - with spin', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell', spin: true },
+        ...mountOptions
+      })
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should match snapshot - with variant', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell', variant: 'fas' },
+        ...mountOptions
+      })
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should match snapshot - with backgroundColor', () => {
+      const wrapper = mount(FzIconBackground, {
+        props: { name: 'bell', backgroundColor: 'grey-100' },
+        ...mountOptions
+      })
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+})

package/src/__tests__/__snapshots__/FzIcon.spec.ts.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`FzIcon > Snapshots > should match snapshot - default state 1`] = `"<div class="flex items-center justify-center w-[25px] h-[25px]"><svg class="h-[20px]" data-testid="fa-icon"></svg></div>"`;
+exports[`FzIcon > Snapshots > should match snapshot - default state 1`] = `"<span role="presentation" class="flex items-center justify-center w-[25px] h-[25px]"><svg class="h-[20px]" data-testid="fa-icon"></svg></span>"`;
 
-exports[`FzIcon > Snapshots > should match snapshot - large size 1`] = `"<div class="flex items-center justify-center w-[32px] h-[32px]"><svg class="h-[24px]" data-testid="fa-icon"></svg></div>"`;
+exports[`FzIcon > Snapshots > should match snapshot - large size 1`] = `"<span role="presentation" class="flex items-center justify-center w-[32px] h-[32px]"><svg class="h-[24px]" data-testid="fa-icon"></svg></span>"`;
 
-exports[`FzIcon > Snapshots > should match snapshot - small size 1`] = `"<div class="flex items-center justify-center w-[15px] h-[15px]"><svg class="h-[12px]" data-testid="fa-icon"></svg></div>"`;
+exports[`FzIcon > Snapshots > should match snapshot - small size 1`] = `"<span role="presentation" class="flex items-center justify-center w-[15px] h-[15px]"><svg class="h-[12px]" data-testid="fa-icon"></svg></span>"`;
 
-exports[`FzIcon > Snapshots > should match snapshot - with spin 1`] = `"<div class="flex items-center justify-center w-[25px] h-[25px]"><svg class="h-[20px]" data-testid="fa-icon"></svg></div>"`;
+exports[`FzIcon > Snapshots > should match snapshot - with spin 1`] = `"<span role="presentation" class="flex items-center justify-center w-[25px] h-[25px]"><svg class="h-[20px]" data-testid="fa-icon"></svg></span>"`;
 
-exports[`FzIcon > Snapshots > should match snapshot - with variant 1`] = `"<div class="flex items-center justify-center w-[25px] h-[25px]"><svg class="h-[20px]" data-testid="fa-icon"></svg></div>"`;
+exports[`FzIcon > Snapshots > should match snapshot - with variant 1`] = `"<span role="presentation" class="flex items-center justify-center w-[25px] h-[25px]"><svg class="h-[20px]" data-testid="fa-icon"></svg></span>"`;

package/src/__tests__/__snapshots__/FzIconBackground.spec.ts.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FzIconBackground > Snapshots > should match snapshot - default state 1`] = `"<span role="presentation" class="flex items-center justify-center w-[25px] h-[25px] box-content p-8 rounded-full bg-core-white"><svg class="h-[20px]" data-testid="fa-icon"></svg></span>"`;
+
+exports[`FzIconBackground > Snapshots > should match snapshot - large size 1`] = `"<span role="presentation" class="flex items-center justify-center w-[32px] h-[32px] box-content p-8 rounded-full bg-core-white"><svg class="h-[24px]" data-testid="fa-icon"></svg></span>"`;
+
+exports[`FzIconBackground > Snapshots > should match snapshot - small size 1`] = `"<span role="presentation" class="flex items-center justify-center w-[15px] h-[15px] box-content p-8 rounded-full bg-core-white"><svg class="h-[12px]" data-testid="fa-icon"></svg></span>"`;
+
+exports[`FzIconBackground > Snapshots > should match snapshot - with backgroundColor 1`] = `"<span role="presentation" class="flex items-center justify-center w-[25px] h-[25px] box-content p-8 rounded-full bg-grey-100"><svg class="h-[20px]" data-testid="fa-icon"></svg></span>"`;
+
+exports[`FzIconBackground > Snapshots > should match snapshot - with spin 1`] = `"<span role="presentation" class="flex items-center justify-center w-[25px] h-[25px] box-content p-8 rounded-full bg-core-white"><svg class="h-[20px]" data-testid="fa-icon"></svg></span>"`;
+
+exports[`FzIconBackground > Snapshots > should match snapshot - with variant 1`] = `"<span role="presentation" class="flex items-center justify-center w-[25px] h-[25px] box-content p-8 rounded-full bg-core-white"><svg class="h-[20px]" data-testid="fa-icon"></svg></span>"`;

package/src/index.ts

@@ -2,15 +2,17 @@ import { Plugin } from 'vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { all } from '@awesome.me/kit-8137893ad3/icons'
 import FzIcon from './FzIcon.vue'
+import FzIconBackground from './FzIconBackground.vue'
 
 const IconPlugin : Plugin = {
   install(app) {
     // @ts-ignore
     library.add(...all)
     app.component('fz-icon', FzIcon)
+    app.component('fz-icon-background', FzIconBackground)
   }
 }
 
-export { FzIcon, IconPlugin }
+export { FzIcon, FzIconBackground, IconPlugin }
 
-export type { IconVariant, IconSize, IconProps } from './types'
+export type { IconVariant, IconSize, IconProps, IconBackgroundProps } from './types'