fix: Type definitions for Vue 3 Composition API

`FontAwesomeIcon` and other components needed to be of type `DefineComponent` for Vue 3 Composition API TypeScript support (as per FortAwesome#276). The type definitions for the component props also needed updating to denote required and optional props. Whilst checking which props were required it was noted that the `FontAwesomeLayer` component uses `fixedWidth` but the README and example use `full-width` so these have been updated to match the component code.

README.md

@@ -573,7 +573,7 @@ Spin and pulse [animation](https://fontawesome.com/how-to-use/on-the-web/styling
 [Layers text](https://fontawesome.com/how-to-use/on-the-web/styling/layering):
 
 ```html
-<font-awesome-layers full-width class="fa-4x">
+<font-awesome-layers fixed-width class="fa-4x">
   <font-awesome-icon icon="queen"/>
   <font-awesome-layers-text class="gray8" transform="down-2 shrink-8" value="Q" />
 </font-awesome-layers>
@@ -582,7 +582,7 @@ Spin and pulse [animation](https://fontawesome.com/how-to-use/on-the-web/styling
 [Counters](https://fontawesome.com/how-to-use/on-the-web/styling/layering):
 
 ```html
-<font-awesome-layers full-width class="fa-4x">
+<font-awesome-layers fixed-width class="fa-4x">
   <font-awesome-icon icon="envelope"/>
   <font-awesome-layers-text counter value="1" position="top-right" />
 </font-awesome-layers>

examples/vue-awesome-example/src/App.vue

@@ -27,13 +27,13 @@
             <font-awesome-icon :icon="queen" size="4x" inverse/>
           </li>
           <li class="pv3 ph2 ma0 link grow">
-            <font-awesome-layers full-width class="fa-4x">
+            <font-awesome-layers fixed-width class="fa-4x">
               <font-awesome-icon :icon="['fas', 'archive']"/>
               <font-awesome-layers-text class="red8" transform="down-3 shrink-14" value="SECRET" />
             </font-awesome-layers>
           </li>
           <li class="pv3 ph2 ma0 link grow">
-            <font-awesome-layers full-width class="fa-4x">
+            <font-awesome-layers fixed-width class="fa-4x">
               <font-awesome-icon :icon="['fas', 'envelope']"/>
               <font-awesome-layers-text class="red8" value="1" position="top-right" />
             </font-awesome-layers>

index.d.ts

@@ -1,35 +1,36 @@
-import { ComponentPublicInstance } from 'vue'
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { DefineComponent } from 'vue'
 
 interface FontAwesomeIconProps {
-  border: boolean
-  fixedWidth: boolean
-  flip: 'horizontal' | 'vertical' | 'both' | null
-  icon: object | Array<string> | string
-  mask: object | Array<string> | string | null
-  listItem: boolean
-  pull: 'right' | 'left' | null
-  pulse: boolean
-  rotation: 90 | 180 | 270 | '90' | '180' | '270' | null
-  swapOpacity: boolean
-  size: 'lg' | 'xs' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | null
-  spin: boolean
-  transform: object | string | null
-  symbol: boolean | string
-  title: string | null
-  inverse: boolean
+  border?: boolean
+  fixedWidth?: boolean
+  flip?: 'horizontal' | 'vertical' | 'both'
+  icon: object | Array<string> | string | IconDefinition
+  mask?: object | Array<string> | string
+  listItem?: boolean
+  pull?: 'right' | 'left'
+  pulse?: boolean
+  rotation?: 90 | 180 | 270 | '90' | '180' | '270'
+  swapOpacity?: boolean
+  size?: 'lg' | 'xs' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x'
+  spin?: boolean
+  transform?: object | string
+  symbol?: boolean | string
+  title?: string
+  inverse?: boolean
 }
 
 interface FontAwesomeLayersProps {
-  fixedWidth: boolean
+  fixedWidth?: boolean
 }
 
 interface FontAwesomeLayersTextProps {
   value: string | number
-  transform: object | string | null
-  counter: boolean
-  position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | null
+  transform?: object | string
+  counter?: boolean
+  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
 }
 
-declare const FontAwesomeIcon: ComponentPublicInstance<FontAwesomeIconProps>
-declare const FontAwesomeLayers: ComponentPublicInstance<FontAwesomeLayersProps>
-declare const FontAwesomeLayersText: ComponentPublicInstance<FontAwesomeLayersTextProps>
+declare const FontAwesomeIcon: DefineComponent<FontAwesomeIconProps>
+declare const FontAwesomeLayers: DefineComponent<FontAwesomeLayersProps>
+declare const FontAwesomeLayersText: DefineComponent<FontAwesomeLayersTextProps>