fix: #169 use IconDefinition from FontAwesome instead of a custom i…

…nterface `FontAwesomeIcon` BREAKING CHANGE: The custom `FontAwesomeIcon` is now replaced with `IconDefinition` from FontAwesome
josdejong · Oct 21, 2022 · 9d693f9 · 9d693f9
1 parent 8029ad2
commit 9d693f9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -263,7 +263,7 @@ const editor = new JSONEditor({
     ```ts
     interface MenuButtonItem {
       onClick: () => void
-      icon?: FontAwesomeIcon
+      icon?: IconDefinition
       text?: string
       title?: string
       className?: string

diff --git a/src/lib/components/controls/Message.svelte b/src/lib/components/controls/Message.svelte
@@ -2,10 +2,11 @@
 
 <script lang="ts">
   import Icon from 'svelte-awesome'
-  import type { FontAwesomeIcon, MessageAction } from '../../types'
+  import type { MessageAction } from '../../types'
+  import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 
   export let type: 'success' | 'error' = 'success' // 'success' or 'error'
-  export let icon: FontAwesomeIcon = undefined
+  export let icon: IconDefinition = undefined
   export let message: string | undefined = undefined
   export let actions: MessageAction[] = []
   export let onClick: () => void | undefined = undefined

diff --git a/src/lib/img/customFontawesomeIcons.ts b/src/lib/img/customFontawesomeIcons.ts
@@ -1,8 +1,9 @@
-import type { FontAwesomeIcon } from '../types'
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
+import type { IconName } from '@fortawesome/fontawesome-common-types'
 
-export const faJSONEditorExpand: FontAwesomeIcon = {
+export const faJSONEditorExpand: IconDefinition = {
   prefix: 'fas',
-  iconName: 'jsoneditor-expand',
+  iconName: 'jsoneditor-expand' as IconName,
   icon: [
     512,
     512,
@@ -15,9 +16,9 @@ export const faJSONEditorExpand: FontAwesomeIcon = {
   ]
 }
 
-export const faJSONEditorCollapse: FontAwesomeIcon = {
+export const faJSONEditorCollapse: IconDefinition = {
   prefix: 'fas',
-  iconName: 'jsoneditor-collapse',
+  iconName: 'jsoneditor-collapse' as IconName,
   icon: [
     512,
     512,
@@ -27,9 +28,9 @@ export const faJSONEditorCollapse: FontAwesomeIcon = {
   ]
 }
 
-export const faJSONEditorFormat: FontAwesomeIcon = {
+export const faJSONEditorFormat: IconDefinition = {
   prefix: 'fas',
-  iconName: 'jsoneditor-format',
+  iconName: 'jsoneditor-format' as IconName,
   icon: [
     512,
     512,
@@ -42,9 +43,9 @@ export const faJSONEditorFormat: FontAwesomeIcon = {
   ]
 }
 
-export const faJSONEditorCompact: FontAwesomeIcon = {
+export const faJSONEditorCompact: IconDefinition = {
   prefix: 'fas',
-  iconName: 'jsoneditor-compact',
+  iconName: 'jsoneditor-compact' as IconName,
   icon: [
     512,
     512,

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -1,5 +1,6 @@
 import type { JSONPatchDocument, JSONPath, JSONPointer, JSONValue } from 'immutable-json-patch'
 import type { SvelteComponentTyped } from 'svelte'
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 
 export type { JSONValue, JSONPointer, JSONPath, JSONPatchDocument } from 'immutable-json-patch'
 
@@ -114,23 +115,22 @@ export type JSONPointerMap<T> = { [pointer: JSONPointer]: T }
 
 export type ClipboardValues = Array<{ key: string; value: JSONValue }>
 
-export interface FontAwesomeIcon {
-  prefix: string
-  iconName: string
-  icon: [number, number, Array<number | string>, string | null, string]
-}
+/**
+ * @deprecated Use IconDefinition instead of FontAwesomeIcon
+ */
+export type FontAwesomeIcon = IconDefinition
 
 export interface DropdownButtonItem {
   text: string
   onClick: () => void
-  icon?: FontAwesomeIcon
+  icon?: IconDefinition
   title?: string
   disabled?: boolean
 }
 
 export interface MenuButtonItem {
   onClick: () => void
-  icon?: FontAwesomeIcon
+  icon?: IconDefinition
   text?: string
   title?: string
   className?: string
@@ -150,7 +150,7 @@ export type MenuItem = MenuButtonItem | MenuSeparatorItem | MenuSpaceItem
 export interface MessageAction {
   text: string
   title: string
-  icon?: FontAwesomeIcon
+  icon?: IconDefinition
   onClick?: () => void
   onMouseDown?: () => void
   disabled?: boolean