Refactor Icon types: Remove Icon.ts, add IconType.ts and AnimatedIcon…

…Type.ts, update imports.

src/@types/AnimatedIconType.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+import IconType from './IconType'
+
+interface AnimatedIconType extends IconType {
+  animationData?: object
+  children?: ReactNode
+}
+
+export default AnimatedIconType

src/@types/IconType.ts

@@ -0,0 +1,15 @@
+import React from 'react'
+import { SystemStyleObject } from '../../styled-system/types'
+
+interface IconType {
+  cssRaw?: SystemStyleObject
+  fill?: string
+  height?: number
+  size?: number
+  style?: React.CSSProperties
+  width?: number
+  animated?: boolean
+  animationComplete?: () => void
+}
+
+export default IconType

src/@types/Shortcut.ts

@@ -2,7 +2,7 @@ import React from 'react'
 import { GestureResponderEvent } from 'react-native'
 import Dispatch from './Dispatch'
 import GesturePath from './GesturePath'
-import Icon from './Icon'
+import Icon from './IconType'
 import Key from './Key'
 import MulticursorFilter from './MulticursorFilter'
 import Path from './Path'

src/components/QuickDropIcon.tsx

@@ -6,7 +6,7 @@ import { css } from '../../styled-system/css'
 import DragAndDropType from '../@types/DragAndDropType'
 import DragThoughtItem from '../@types/DragThoughtItem'
 import DragThoughtZone from '../@types/DragThoughtZone'
-import IconType from '../@types/Icon'
+import IconType from '../@types/IconType'
 import State from '../@types/State'
 import { alertActionCreator as alert } from '../actions/alert'
 import { dragInProgressActionCreator as dragInProgress } from '../actions/dragInProgress'

src/components/RedoIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../@types/Icon'
+import IconType from '../@types/IconType'
 import AnimatedIcon from './icons/AnimatedIcon'
 import animationData from './icons/animations/02-redo_2.json'
 

src/components/SearchIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../@types/Icon'
+import IconType from '../@types/IconType'
 import AnimatedIcon from './icons/AnimatedIcon'
 import animationData from './icons/animations/12-search.json'
 

src/components/ToolbarButton.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'
 import { css } from '../../styled-system/css'
 import { token } from '../../styled-system/tokens'
 import DragShortcutZone from '../@types/DragShortcutZone'
-import Icon from '../@types/Icon'
+import Icon from '../@types/IconType'
 import ShortcutId from '../@types/ShortcutId'
 import { isTouch } from '../browser'
 import useDragAndDropToolbarButton from '../hooks/useDragAndDropToolbarButton'

src/components/TriangleDown.tsx

@@ -1,5 +1,5 @@
 import { css } from '../../styled-system/css'
-import Icon from '../@types/Icon'
+import Icon from '../@types/IconType'
 
 /** A down-facing triangle component. */
 const TriangleDown = ({ fill = 'black', size = 20, width, height, style, cssRaw }: Icon) => (

src/components/TriangleLeft.tsx

@@ -1,5 +1,5 @@
 import { css } from '../../styled-system/css'
-import Icon from '../@types/Icon'
+import Icon from '../@types/IconType'
 
 /** A left-facing svg triangle. */
 const TriangleLeft = ({ fill = 'black', size = 20, width, height, style, cssRaw }: Icon) => (

src/components/TriangleRight.tsx

@@ -1,5 +1,5 @@
 import { css } from '../../styled-system/css'
-import Icon from '../@types/Icon'
+import Icon from '../@types/IconType'
 
 /** A right-facing triangle component. */
 const TriangleRight = ({ fill = 'black', size = 20, width, height, style, cssRaw }: Icon) => (

src/components/UndoIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../@types/Icon'
+import IconType from '../@types/IconType'
 import AnimatedIcon from './icons/AnimatedIcon'
 import animationData from './icons/animations/01-undo_2.json'
 

src/components/icons/AnimatedIcon.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { css, cx } from '../../../styled-system/css'
 import { icon } from '../../../styled-system/recipes'
 import { token } from '../../../styled-system/tokens'
-import { AnimatedIconType } from '../../@types/Icon'
+import AnimatedIconType from '../../@types/AnimatedIconType'
 import { ICON_SCALING_FACTOR } from '../../constants'
 import LottieAnimation from './LottieAnimation'
 

src/components/icons/ArchiveIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/22-trash_3.json'
 

src/components/icons/BackIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/06-back.json'
 

src/components/icons/BoldTextIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/13-bold_4.json'
 

src/components/icons/BumpThoughtDownIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/14-bump-thought-down_2.json'
 

src/components/icons/Check.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/12-mark-as-done_3.json'
 

src/components/icons/ClearThoughtIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/25-clear-thought.json'
 

src/components/icons/CollapseIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/26-collaps_2.json'
 

src/components/icons/CommandLibraryIcon.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { css, cx } from '../../../styled-system/css'
 import { icon } from '../../../styled-system/recipes'
 import { token } from '../../../styled-system/tokens'
-import Icon from '../../@types/Icon'
+import Icon from '../../@types/IconType'
 
 /** Command Library icon that looks like a finger pressing a button. */
 const CommandLibraryIcon: FC<Icon> = ({ cssRaw, fill, style, size = 20 }) => {

src/components/icons/CommandPaletteIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/27-command-palette.json'
 

src/components/icons/ContextViewIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/18-context-view_3.json'
 

src/components/icons/ConvertToNoteIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/24-convert-to-note.json'
 

src/components/icons/CopyClipboard.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '../../../styled-system/css'
 import { icon } from '../../../styled-system/recipes'
 import { token } from '../../../styled-system/tokens'
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import { ICON_SCALING_FACTOR } from '../../constants'
 
 /** Copy Clipboard icon. */

src/components/icons/DeleteIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/31-parmanently-delete_2.json'
 

src/components/icons/DeviceIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/26-device-management_2.json'
 

src/components/icons/DownloadIcon.tsx

@@ -1,6 +1,6 @@
 import { css, cx } from '../../../styled-system/css'
 import { icon } from '../../../styled-system/recipes'
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 
 /** Download icon. */
 const DownloadIcon = ({ fill, size = 20, style, cssRaw }: IconType) => {

src/components/icons/ExtractThoughtIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/28-extract_2.json'
 

src/components/icons/FavoritesIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/04-favorite_3.json'
 

src/components/icons/GenerateThoughtIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/29-generate-thought_2.json'
 

src/components/icons/Heading1Icon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/18-heading-one.json'
 

src/components/icons/Heading2Icon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/19-heading-two.json'
 

src/components/icons/Heading3Icon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/20-heading-three.json'
 

src/components/icons/Heading4Icon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/21-heading-four.json'
 

src/components/icons/Heading5Icon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/22-heading-five.json'
 

src/components/icons/HelpIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/13-help_2.json'
 

src/components/icons/HiddenThoughtsIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/24-show-hidden-thoughts_4.json'
 

src/components/icons/HomeIcon.tsx

@@ -1,7 +1,7 @@
 import { useSelector } from 'react-redux'
 import { css, cx } from '../../../styled-system/css'
 import { token } from '../../../styled-system/tokens'
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 
 /** A home icon. */
 const HomeIcon = ({

src/components/icons/HomeToolbarIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/11-home.json'
 

src/components/icons/IndentIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/06-indent_2.json'
 

src/components/icons/ItalicTextIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/14-italic_4.json'
 

src/components/icons/JoinThoughtsIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/30-join-thought.json'
 

src/components/icons/JumpBackIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/07-jump-back.json'
 

src/components/icons/JumpForwardIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/08-jump-forward.json'
 

src/components/icons/LetterCaseIcon.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '../../../styled-system/css'
 import { icon } from '../../../styled-system/recipes'
 import { token } from '../../../styled-system/tokens'
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import { ICON_SCALING_FACTOR } from '../../constants'
 
 /** Letter-case icon. */

src/components/icons/LetterCaseWithPicker.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react'
 import { useSelector } from 'react-redux'
 import { CSSTransition } from 'react-transition-group'
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import LetterCasePicker from '../LetterCasePicker'
 import LetterCaseIcon from './LetterCaseIcon'
 

src/components/icons/LowerCaseIcon.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '../../../styled-system/css'
 import { icon } from '../../../styled-system/recipes'
 import { token } from '../../../styled-system/tokens'
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import { ICON_SCALING_FACTOR } from '../../constants'
 
 /** Lower-Case icon. */

src/components/icons/MetaIcon.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { css, cx } from '../../../styled-system/css'
 import { icon } from '../../../styled-system/recipes'
 import { token } from '../../../styled-system/tokens'
-import Icon from '../../@types/Icon'
+import Icon from '../../@types/IconType'
 
 /** Meta icon that shows code under a magnifying glass. */
 // https://thenounproject.com/icon/inspect-element-4199164/

src/components/icons/MoveCursorBackwardIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/16-move-thought-up.json'
 

src/components/icons/MoveCursorForwardIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/15-move-thought-down.json'
 

src/components/icons/MoveThoughtDownIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/15-move-thought-down.json'
 

src/components/icons/MoveThoughtUpIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/16-move-thought-up.json'
 

src/components/icons/NewSubthoughtAboveIcon.tsx

@@ -1,4 +1,4 @@
-import IconType from '../../@types/Icon'
+import IconType from '../../@types/IconType'
 import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/03-new-subthought-above_2.json'