146 lines
4.3 KiB
TypeScript
146 lines
4.3 KiB
TypeScript
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,
|
|
}
|
|
|
|
type Props = {
|
|
type: IconType
|
|
className?: string
|
|
ariaLabel?: string
|
|
size?: 'small' | 'medium' | 'normal' | 'custom'
|
|
}
|
|
|
|
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])
|
|
|
|
if (!IconComponent) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<IconComponent
|
|
className={`${dimensions} fill-current ${className}`}
|
|
role="img"
|
|
{...(ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-hidden': true })}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default Icon
|