feat: ability to favorite tags + customize icon (#1858)

packages/web/src/javascripts/Components/Icon/Icon.tsx

@@ -1,141 +1,77 @@
-import { FunctionComponent, useMemo } from 'react'
-import { IconType } from '@standardnotes/snjs'
-import * as icons from '@standardnotes/icons'
-
-export const ICONS = {
-  'account-circle': icons.AccountCircleIcon,
-  'arrow-left': icons.ArrowLeftIcon,
-  'arrow-right': icons.ArrowRightIcon,
-  'arrows-sort-down': icons.ArrowsSortDownIcon,
-  'arrows-sort-up': icons.ArrowsSortUpIcon,
-  'attachment-file': icons.AttachmentFileIcon,
-  'check-bold': icons.CheckBoldIcon,
-  'check-circle': icons.CheckCircleIcon,
-  'chevron-down': icons.ChevronDownIcon,
-  'chevron-left': icons.ChevronLeftIcon,
-  'chevron-right': icons.ChevronRightIcon,
-  'clear-circle-filled': icons.ClearCircleFilledIcon,
-  'cloud-off': icons.CloudOffIcon,
-  'diamond-filled': icons.DiamondFilledIcon,
-  'eye-off': icons.EyeOffIcon,
-  'file-doc': icons.FileDocIcon,
-  'file-image': icons.FileImageIcon,
-  'file-mov': icons.FileMovIcon,
-  'file-music': icons.FileMusicIcon,
-  'file-other': icons.FileOtherIcon,
-  'file-pdf': icons.FilePdfIcon,
-  'file-ppt': icons.FilePptIcon,
-  'file-xls': icons.FileXlsIcon,
-  'file-zip': icons.FileZipIcon,
-  'hashtag-off': icons.HashtagOffIcon,
-  'link-off': icons.LinkOffIcon,
-  'list-bulleted': icons.ListBulleted,
-  'lock-filled': icons.LockFilledIcon,
-  'menu-arrow-down-alt': icons.MenuArrowDownAlt,
-  'menu-arrow-down': icons.MenuArrowDownIcon,
-  'menu-arrow-right': icons.MenuArrowRightIcon,
-  'menu-close': icons.MenuCloseIcon,
-  'menu-variant': icons.MenuVariantIcon,
-  'notes-filled': icons.NotesFilledIcon,
-  'pencil-filled': icons.PencilFilledIcon,
-  'pencil-off': icons.PencilOffIcon,
-  'pin-filled': icons.PinFilledIcon,
-  'plain-text': icons.PlainTextIcon,
-  'premium-feature': icons.PremiumFeatureIcon,
-  'rich-text': icons.RichTextIcon,
-  'sort-descending': icons.SortDescendingIcon,
-  'star-circle-filled': icons.StarCircleFilled,
-  'star-filled': icons.StarFilledIcon,
-  'star-variant-filled': icons.StarVariantFilledIcon,
-  'trash-filled': icons.TrashFilledIcon,
-  'trash-sweep': icons.TrashSweepIcon,
-  'user-add': icons.UserAddIcon,
-  'user-switch': icons.UserSwitch,
-  accessibility: icons.AccessibilityIcon,
-  add: icons.AddIcon,
-  archive: icons.ArchiveIcon,
-  asterisk: icons.AsteriskIcon,
-  authenticator: icons.AuthenticatorIcon,
-  check: icons.CheckIcon,
-  close: icons.CloseIcon,
-  code: icons.CodeIcon,
-  copy: icons.CopyIcon,
-  dashboard: icons.DashboardIcon,
-  diamond: icons.DiamondIcon,
-  download: icons.DownloadIcon,
-  editor: icons.EditorIcon,
-  email: icons.EmailIcon,
-  eye: icons.EyeIcon,
-  file: icons.FileIcon,
-  folder: icons.FolderIcon,
-  hashtag: icons.HashtagIcon,
-  help: icons.HelpIcon,
-  history: icons.HistoryIcon,
-  info: icons.InfoIcon,
-  keyboard: icons.KeyboardIcon,
-  link: icons.LinkIcon,
-  listed: icons.ListedIcon,
-  lock: icons.LockIcon,
-  markdown: icons.MarkdownIcon,
-  more: icons.MoreIcon,
-  notes: icons.NotesIcon,
-  password: icons.PasswordIcon,
-  pencil: icons.PencilIcon,
-  pin: icons.PinIcon,
-  restore: icons.RestoreIcon,
-  search: icons.SearchIcon,
-  security: icons.SecurityIcon,
-  server: icons.ServerIcon,
-  settings: icons.SettingsIcon,
-  share: icons.ShareIcon,
-  signIn: icons.SignInIcon,
-  signOut: icons.SignOutIcon,
-  spreadsheets: icons.SpreadsheetsIcon,
-  star: icons.StarIcon,
-  subtract: icons.SubtractIcon,
-  sync: icons.SyncIcon,
-  tasks: icons.TasksIcon,
-  themes: icons.ThemesIcon,
-  trash: icons.TrashIcon,
-  tune: icons.TuneIcon,
-  unarchive: icons.UnarchiveIcon,
-  unpin: icons.UnpinIcon,
-  user: icons.UserIcon,
-  view: icons.ViewIcon,
-  warning: icons.WarningIcon,
-  window: icons.WindowIcon,
-}
+import { FunctionComponent } from 'react'
+import { VectorIconNameOrEmoji } from '@standardnotes/snjs'
+import { IconNameToSvgMapping } from './IconNameToSvgMapping'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
-  type: IconType
+  type: VectorIconNameOrEmoji
   className?: string
   ariaLabel?: string
-  size?: 'small' | 'medium' | 'normal' | 'custom'
+  size?: 'small' | 'medium' | 'normal' | 'large' | 'custom'
+}
+
+const ContainerDimensions = {
+  small: 'w-3.5 h-3.5',
+  medium: 'w-4 h-4',
+  normal: 'w-5 h-5',
+  large: 'w-6 h-6',
+  custom: '',
+}
+
+const EmojiContainerDimensions = {
+  small: 'w-4 h-4',
+  medium: 'w-5 h-5',
+  normal: 'w-5 h-5',
+  large: 'w-7 h-6',
+  custom: '',
+}
+
+const EmojiOffset = {
+  small: '',
+  medium: '',
+  normal: '-mt-0.5',
+  large: '',
+  custom: '',
+}
+
+const EmojiSize = {
+  small: 'text-xs',
+  medium: 'text-sm',
+  normal: 'text-base',
+  large: 'text-lg',
+  custom: '',
+}
+
+const getIconComponent = (type: VectorIconNameOrEmoji) => {
+  return IconNameToSvgMapping[type as keyof typeof IconNameToSvgMapping]
+}
+
+export const isIconEmoji = (type: VectorIconNameOrEmoji): boolean => {
+  return getIconComponent(type) == undefined
 }
 
 const Icon: FunctionComponent<Props> = ({ type, className = '', ariaLabel, size = 'normal' }) => {
-  const IconComponent = ICONS[type as keyof typeof ICONS]
-
-  const dimensions = useMemo(() => {
-    switch (size) {
-      case 'small':
-        return 'w-3.5 h-3.5'
-      case 'medium':
-        return 'w-4 h-4'
-      case 'custom':
-        return ''
-      default:
-        return 'w-5 h-5'
-    }
-  }, [size])
-
+  const IconComponent = getIconComponent(type)
   if (!IconComponent) {
-    return null
+    return (
+      <label
+        className={classNames(
+          'fill-current',
+          'text-center',
+          EmojiSize[size],
+          EmojiContainerDimensions[size],
+          EmojiOffset[size],
+          className,
+        )}
+      >
+        {type}
+      </label>
+    )
   }
 
   return (
     <IconComponent
-      className={`${dimensions} fill-current ${className}`}
+      className={`${ContainerDimensions[size]} fill-current ${className}`}
       role="img"
       {...(ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-hidden': true })}
     />